/* Wrkr — the one system, Clear. Every value a page may use is here, and nothing else is; ui/kit.css draws every shared
   piece from these, a page's own style only places them, and android/kit.mjs and apple/kit.py make the apps' own from
   this file.

   CLEAR is Wrkr as Apple would draw it: white and the system's greys, the brand's green as the one colour, glass for
   what floats over the chat, and the device's own letters on Apple's ladder of sizes. The answer is what the eye goes
   to; everything around it steps back.

   ONE DESIGN, TWO LIGHTS. Every colour is a light-dark() pair, written with spaces inside rgb() so the apps' readers
   split each pair at its one comma. Between the two only the grounds, the inks and the glass change. */

:root {
  color-scheme: light dark;

  /* ── grounds ───────────────────────────────────────────────────────────────
     The ground is where a chat is read. A grouped page (Your AI, the account) lies on the grey and holds its rows on
     cards; in the dark both are black and the card is lifted grey. What is raised sits on the ground as a quiet fill,
     never a shadow; what is sunk holds a file's picture. */
  --ground: light-dark(#ffffff, #000000);
  --grouped: light-dark(#f2f2f7, #000000);
  --grouped-card: light-dark(#ffffff, #1c1c1e);
  --raised: light-dark(#f2f2f7, #1c1c1e);
  --sunk: light-dark(#e5e5ea, #2c2c2e);
  /* What floats and must be read whole: a sheet, a dialog, a menu where glass cannot be drawn. */
  --float: light-dark(#ffffff, #1c1c1e);
  /* A hover, and what is chosen: grey laid thinly over whatever it is on. */
  --fill: light-dark(rgb(120 120 128 / .12), rgb(120 120 128 / .24));
  --fill-strong: light-dark(rgb(120 120 128 / .2), rgb(120 120 128 / .36));
  /* What is chosen among a few side by side, a segment or a tab: lifted white, in the dark a lighter grey. */
  --chosen: light-dark(#ffffff, #636366);
  /* Where one surface ends: a hairline, drawn half a point wide. */
  --edge: light-dark(rgb(60 60 67 / .18), rgb(84 84 88 / .6));

  /* ── glass: what floats over the chat ──────────────────────────────────────
     The head's buttons, the message box, menus and chips are glass: the chat moves under them, blurred. The apps
     draw the platform's own (Apple's glass; on Android a solid --float). */
  --glass: light-dark(rgb(250 250 252 / .74), rgb(38 38 40 / .66));
  --glass-edge: light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .09));
  --glass-light: light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .16));
  --blur: 16px;

  /* ── inks ──────────────────────────────────────────────────────────────────
     What is read, what explains it, and what only labels it (a time, a hint), each 4.5:1 or more on its ground, a
     card and the glass. */
  --ink: light-dark(#000000, #ffffff);
  --ink-2: light-dark(#545458, #aeaeb2);
  --ink-3: light-dark(#6e6e73, #8e8e93);

  /* ── the one colour: the brand's green ────────────────────────────────────
     Green is what can be pressed, what is the person's own and what is on: a link, the chosen row, their messages,
     the one button a screen may fill, a switch that is on, a Desk answering. Strong is that button's fill, the same
     green in both lights so white words on it stay 5:1. The logo, Alex between its brackets, is its own art in the
     same green. Something at work shows a spinner, never a green dot, so a dot is only ever "needs you" or "on". */
  --accent: light-dark(#0f7d57, #3fcf8e);
  --accent-soft: light-dark(rgb(15 125 87 / .1), rgb(63 207 142 / .16));
  --strong: light-dark(#0f7d57, #0f7d57);
  --on-strong: light-dark(#ffffff, #ffffff);
  /* Where the keyboard is. */
  --focus: light-dark(rgb(15 125 87 / .5), rgb(63 207 142 / .55));

  /* ── colour that says how something is ─────────────────────────────────────
     Orange is a limit or a warning, never red. Red is Delete forever and nothing else, written in red, never a red
     slab. Neither carries words alone. */
  --warn: light-dark(#c24e00, #ff9f0a);
  --warn-soft: light-dark(rgb(194 78 0 / .1), rgb(255 159 10 / .16));
  --danger: light-dark(#d70015, #ff453a);
  --danger-soft: light-dark(rgb(215 0 21 / .08), rgb(255 69 58 / .16));
  /* What dims the page behind a sheet or the menu. */
  --backdrop: light-dark(rgb(0 0 0 / .25), rgb(0 0 0 / .5));

  /* ── a file's kind ─────────────────────────────────────────────────────────
     A file shows as a tile of its kind's colour with a white glyph, as a person's own Files app draws it, so a sheet
     reads as a sheet before its name is read. A picture shows itself. The same in both lights. */
  --kind-sheet: #2e9d4c;
  --kind-pdf: #e5483d;
  --kind-doc: #2f7cf6;
  --kind-slides: #d9770a;
  --kind-media: #8e5bf0;
  --kind-sound: #e5487a;
  --kind-other: #8e8e93;

  /* ── identity ──────────────────────────────────────────────────────────────
     The colours a person picks for a project, and for Alex's face; Alex wears jade, the logo's own, until they pick.
     A touch lighter in the dark. What sits on a colour - a project's glyph, a switch's knob - is white. */
  --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);
  --on-colour: light-dark(#ffffff, #ffffff);

  /* ── the brand's own, never a page's ─────────────────────────────────────────
     Wrkr's tile, and the box a worker comes in with what is printed on it: things on the ground, the same in both
     lights. The logo itself is its art in ui/identity/; [wrkr] in letters is the website's. */
  --mark: light-dark(#0b0d10, #0b0d10);
  --jade: light-dark(#14a37a, #14a37a);
  --mint: light-dark(#7ff0c2, #7ff0c2);
  --butter: light-dark(#ffd98a, #ffd98a);
  --on-butter: light-dark(#2a2116, #2a2116);

  /* ── light: how far a surface sits off the ground ──────────────────────────
     Cards do not cast shadows; only what floats does. 1 is a hairline edge, 2 a panel beside the chat, 3 a menu or a
     dialog over the page. */
  --shade-1: light-dark(rgb(0 0 0 / .05), rgb(0 0 0 / .3));
  --shade-2: light-dark(rgb(0 0 0 / .09), rgb(0 0 0 / .45));
  --shade-3: light-dark(rgb(0 0 0 / .16), rgb(0 0 0 / .6));
  --lift-1: 0 0 0 .5px var(--edge);
  --lift-2: 0 0 0 .5px var(--glass-edge), 0 1px 3px var(--shade-1), 0 8px 24px var(--shade-2);
  --lift-3: 0 0 0 .5px var(--glass-edge), 0 2px 6px var(--shade-1), 0 18px 48px var(--shade-3);

  /* ── type: the device's own letters, on Apple's ladder ─────────────────────
     San Francisco on Apple's devices, the system's own on Android and Windows. Six sizes and no others: display for a
     page's title on a phone, title for a computer's and for a first question, title-2 for a sheet, read for what is
     read and pressed (the answer read looser, at prose), callout for what explains, meta for when and how much.
     Nothing is smaller than 13. Weight is 400 to read, 600 for a name or a button, 700 for a title. Each size keeps
     Apple's own tracking. The apps use the platform's text styles, so a person's own text size moves all of it. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --size-display: 34px;
  --size-title: 28px;
  --size-title-2: 22px;
  --size-read: 17px;
  --size-callout: 15px;
  --size-meta: 13px;
  --line-display: 41px;
  --line-title: 34px;
  --line-title-2: 28px;
  --line-read: 22px;
  --line-prose: 25px;
  --line-callout: 20px;
  --line-meta: 18px;
  --track-display: .011em;
  --track-title: .013em;
  --track-title-2: .016em;
  --track-read: -.024em;
  --track-callout: -.016em;
  --track-meta: -.006em;
  --w-text: 400;
  --w-strong: 600;
  --w-display: 700;
  /* How wide a line of reading may run: about 75 letters of the answer. */
  --measure: 720px;

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

  /* ── corners: soft, and each one inside the next ───────────────────────────
     8 a thumbnail or a chip's picture, 12 a field or a row in a menu, 16 a card, 22 a message, the message box and a
     sheet, 28 a dialog or a panel on a computer. Apple's apps draw them continuous; the web draws them round. */
  --r1: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 22px;
  --r5: 28px;
  --round: 999px;

  /* ── sizes ─────────────────────────────────────────────────────────────────
     Anything pressed is 44 to hit, Apple's least; the one button that matters is 50 tall. A glyph is 22, 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: 44px;
  --control: 50px;
  --control-small: 36px;
  --icon: 22px;
  --icon-small: 16px;
  --pic-xs: 20px;
  --pic-s: 28px;
  --pic-m: 40px;
  --pic-l: 64px;
  --pic-xl: 96px;
  --pic-xxl: 128px;
  /* The sidebar, the panel beside a chat, a list beside what is chosen in it, a page's column, a page alone. */
  --sidebar: 300px;
  --panel: 440px;
  --list: 360px;
  --page: 1040px;
  --alone: 440px;
  /* How far a narrower window takes them: the chat keeps 420, and the panel beside it gives way first. */
  --sheet-least: 420px;
  --panel-least: 360px;

  /* ── motion ────────────────────────────────────────────────────────────────
     A state changes with a short movement that settles without bouncing, as Apple's own springs do; it starts from
     where the thing came from and ends where it lives. Only Alex hops. Quick is a press or a switch, calm a fold or a
     menu, slow a sheet or the menu sliding in. Breath is the brackets while Alex works. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-both: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --quick: 150ms;
  --calm: 300ms;
  --slow: 450ms;
  --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 }
}