/* THE BRACKETS: the look proposed for the site, the shop, the product and the apps. The worker's own green is
   the brand's ground, and the brackets of [wrkr] are its device: the worker's computer, a phrase a sentence points
   at, what is chosen. The light stays warm paper; the dark is a deep jade night instead of brown, and there the
   one button is butter. Parkinsans, round and warm, for every name and title, and rounder corners. Only what
   differs from the product's warm kit is changed.

   Wrkr — the one system. Every value a page may use is here, and nothing else is; a page's own style only places
   things. It is the warm look for a normal person: warm oat paper and a warm dark to read, Parkinsans on every
   name, Geist to read and Geist Mono for [wrkr], and words and buttons big enough for anybody.

   ONE DESIGN, TWO LIGHTS. Every colour is a light-dark() pair and the root's color-scheme picks the
   half. Between the two only the grounds, the inks and the light change: the same surfaces sit in
   the same places at the same distance from the ground. In the light, a surface is paper lifted by
   a soft shadow; in the dark, it is a little lighter than the ground and catches light on its top edge. */

/* The site's own font files (fonts/, each family's OFL beside it). A file that changes takes a new name, because a
   browser keeps these. Latin first, then the rest of Latin. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: "Parkinsans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/parkinsans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Parkinsans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/parkinsans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }

:root {
  color-scheme: light dark;

  /* ── the ground, and what sits on it ────────────────────────────────────────
     Warm oat, and in the dark a warm near-black. The sheet is where work is read; a raised surface is a
     card on the ground or the sheet; what floats is the composer, a menu, a dialog; what is sunk holds a
     file's picture. */
  --ground: light-dark(#f3ece2, #0a2e25);
  --sheet: light-dark(#fffaf4, #0f3a2f);
  --raised: light-dark(#fffdf9, #144536);
  --float: light-dark(#fffdf9, #194f3e);
  --sunk: light-dark(#efe6da, #072219);
  /* The person's own words in a chat sit on the worker's green, lightly. */
  --bubble: light-dark(#dcefe3, #1d5c47);
  /* A hover, and what is chosen: the ink laid thinly over whatever it is on. */
  --fill: light-dark(rgb(84 58 30 / .065), rgb(255 244 230 / .07));
  --fill-strong: light-dark(rgb(84 58 30 / .11), rgb(255 244 230 / .12));

  /* ── inks ─────────────────────────────────────────────────────────────────────
     What is read, what explains it, and what only labels it. The strong fill is the one primary
     button a screen may have, in the worker's own green. */
  --ink: light-dark(#241c15, #fff4e2);
  --ink-2: light-dark(#6e6052, #b9d6c8);
  --ink-3: light-dark(#9b8c7c, #7fa596);
  --strong: light-dark(#0f7d57, #ffd98a);
  --on-strong: light-dark(#fffaf4, #241c15);

  /* ── colour with a job ────────────────────────────────────────────────────────
     Green is something working now: a bot at work, an app live at its link, a switch that is on, and
     the brackets of [wrkr]. The site's emerald, and in the dark its film's mint. It never carries words
     alone; a dot or a ring beside ink does. Orange is a warning and rare. Red is Delete forever and
     nothing else. */
  --accent: light-dark(#0d9668, #5ad19e);
  --accent-soft: light-dark(rgb(13 150 104 / .13), rgb(90 209 158 / .17));
  --warn: light-dark(#c45a00, #ffa152);
  --warn-soft: light-dark(rgb(196 90 0 / .11), rgb(255 161 82 / .14));
  --danger: light-dark(#cc2a1f, #ff7468);
  --danger-soft: light-dark(rgb(204 42 31 / .1), rgb(255 116 104 / .14));
  --on-danger: light-dark(#ffffff, #2a0a06);
  /* Where the keyboard is. */
  --focus: light-dark(rgb(13 150 104 / .5), rgb(90 209 158 / .55));
  /* What dims the page behind a question. */
  --backdrop: light-dark(rgb(36 28 21 / .26), rgb(0 0 0 / .55));
  /* Wrkr's own tile, the site's icon: near-black in both lights. */
  --mark: light-dark(#0b0d10, #0b0d10);
  /* The brand's own ground: the welcome, the shop's first page and the site sit on the worker's green,
     lit from where the worker is. */
  --brand-ground: #0d4a3b;
  --brand-deep: #082f25;
  --brand-glow: #6ee8ba;
  --brand-ink: #fff4e2;
  --butter: #ffd98a;
  --on-butter: #2a2116;
  /* The box a worker comes in and what is printed on it: the worker's jade and its brackets' mint, the same in both
     lights, as the kit's box has them. */
  --jade: #14a37a;
  --mint: #7ff0c2;
  /* The brackets of [wrkr], drawn: around the worker, around what a sentence points at, around what is
     chosen or has the keyboard. The colour is the accent of the light they sit in. */
  --bracket: var(--accent);
  --bracket-stroke: 2px;
  --bracket-arm: 12px;

  /* ── identity ─────────────────────────────────────────────────────────────────
     The colours a person picks for a project, and the colours of the default bot faces and
     pictures (identity/). The same eight everywhere; a touch lighter in the dark. */
  --id-jade: light-dark(#2fa285, #3bb594);
  --id-sky: light-dark(#3d8be8, #559df0);
  --id-iris: light-dark(#8b6de6, #9c83ee);
  --id-rose: light-dark(#e4679d, #ec7fad);
  --id-honey: light-dark(#e6a22c, #edb24b);
  --id-moss: light-dark(#6fa63f, #80b652);
  --id-sand: light-dark(#cdb48c, #d5bf9a);
  --id-graphite: light-dark(#50545c, #6e737c);
  /* What sits on a colour - a project's glyph, a switch's knob - is white in both lights. */
  --on-colour: light-dark(#ffffff, #ffffff);

  /* ── light: how far a surface sits off the ground ─────────────────────────────
     1 is a card, 2 is the one thing that matters most on a page, 3 is what floats above the page.
     The edge is where light catches a surface, never a drawn line. */
  --edge: light-dark(rgb(84 58 30 / .08), rgb(255 244 230 / .06));
  --shade-1: light-dark(rgb(84 58 30 / .06), rgb(0 0 0 / .32));
  --shade-2: light-dark(rgb(84 58 30 / .13), rgb(0 0 0 / .44));
  --shade-3: light-dark(rgb(84 58 30 / .2), rgb(0 0 0 / .6));
  --rim-light: light-dark(rgb(255 255 255 / 0), rgb(255 244 230 / .06));
  --rim: inset 0 1px 0 var(--rim-light);
  --lift-1: 0 0 0 1px var(--edge), 0 1px 2px var(--shade-1);
  --lift-2: 0 0 0 1px var(--edge), 0 1px 2px var(--shade-1), 0 10px 28px -8px var(--shade-2);
  --lift-3: 0 0 0 1px var(--edge), 0 6px 16px -4px var(--shade-2), 0 28px 64px -16px var(--shade-3);

  /* ── type: the site's three families, in three sizes ─────────────────────────
     Parkinsans is a page's title and every name - the worker's, a chat's, an AI's. Geist is
     everything a person reads or presses. Geist Mono is [wrkr] and a model's name. Meta says when,
     where and how much. Nothing else. 17 px to read, so nobody leans in. Weight is 400 to read and
     600 for a name, a heading or the display, and that is all. The system's own letters stand behind
     each, for a page that cannot load them. */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Parkinsans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --size-display: 36px;
  --size-read: 17px;
  --size-meta: 14px;
  --line-display: 42px;
  --line-read: 26px;
  --line-prose: 28px;
  --line-meta: 20px;
  --track-display: -.03em;
  --track-read: 0em;
  --w-text: 400;
  --w-strong: 600;
  --w-display: 600;
  /* How wide a line of reading may run. */
  --measure: 720px;

  /* ── rhythm: one spacing scale for every gap, pad and margin ─────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;
  --s10: 64px;
  --s11: 96px;

  /* ── corners: one family, each one inside the next ────────────────────────── */
  --r1: 8px;
  --r2: 16px;
  --r3: 24px;
  --r4: 34px;
  --round: 999px;

  /* ── sizes ────────────────────────────────────────────────────────────────────
     Anything pressed is 48 px to hit, and a button is bigger than that: a thumb finds it first time.
     A glyph is 20, or 16 beside meta words. A picture - a worker's face, a person's picture, a
     project's icon - comes in six sizes and no others. */
  --hit: 48px;
  --control: 54px;
  --control-small: 40px;
  --icon: 20px;
  --icon-small: 16px;
  --pic-xs: 20px;
  --pic-s: 28px;
  --pic-m: 40px;
  --pic-l: 64px;
  --pic-xl: 96px;
  --pic-xxl: 128px;
  /* [wrkr] across a top bar. */
  --wordmark: 26px;
  /* The sidebar, the panel beside a chat, a list beside what is chosen in it, a page's column, a page alone. */
  --sidebar: 296px;
  --panel: 440px;
  --list: 360px;
  --page: 1040px;
  --alone: 440px;
  /* How far a narrower window takes them: the sheet being read keeps 420, and the panel beside it gives way first. */
  --sheet-least: 420px;
  --panel-least: 360px;

  /* ── motion: a state changes with a short, eased movement, and nothing bounces ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-both: cubic-bezier(.45, 0, .2, 1);
  /* What pops into place, a speech bubble or a sticker, overshoots a little. */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --quick: 120ms;
  --calm: 220ms;
  --slow: 360ms;
  /* The slow breath of something working. */
  --breath: 2400ms;
}

/* A choice the person made wins over their device's own setting. */
:root[data-theme="light"] { color-scheme: light }
:root[data-theme="dark"] { color-scheme: dark }

/* Under reduced motion every change is instant and nothing moves by itself. */
@media (prefers-reduced-motion: reduce) {
  :root { --quick: 0ms; --calm: 0ms; --slow: 0ms }
  *, *::before, *::after { animation: none !important; transition: none !important }
}