/* Aiko's design tokens: the ONLY file in web/ that holds a colour value.
   Everything else refers to a token here (npm test fails on a colour literal
   anywhere else in web/, or on an inline style attribute).

   Three layers, each built only from the one above it:
     1. Palette   --palette-*   raw colours, sampled from the brand mark: a deep
                                teal disc (#284B52) carrying an ivory script A (#E9E9E6).
     2. Roles     --md-*        Material 3 colour roles. Components use these.
     3. Aliases   --fill-*, --status-*, --job-*, --state-*, --shadow-*, --scrim
                                named jobs in the UI, so a component says what a
                                colour is FOR, and changing it is one line here.

   The theme is dark only: ivory on near-black ink, with the disc's teal as the
   brand fill. Contrast (WCAG): body text 16:1, secondary text 9.6:1 (7.0:1 on the
   highest container), accents and badges 8-12:1, outline 6.9:1. Recheck any
   change with the pairs listed in docs/v4/design-system.md. */

:root {
  color-scheme: dark;

  /* ── 1. palette ───────────────────────────────────────────────────── */
  /* ink: near-black surfaces with only a trace of the teal's hue, so the brand teal stands out */
  --palette-ink-4: #08090a;
  --palette-ink-6: #0b0d0e;
  --palette-ink-10: #16191b;
  --palette-ink-12: #1b1f21;
  --palette-ink-15: #212527;
  --palette-ink-17: #272b2d;
  --palette-ink-22: #32373a;
  /* teal, hue 190: the brand disc (24), accents (60-85) */
  --palette-teal-21: #254046;
  --palette-teal-24: #284b52; /* the disc */
  --palette-teal-60: #859fa3;
  --palette-teal-75: #a6cfd3;
  --palette-teal-85: #c9e5e8;
  /* ivory, the letter: text on dark */
  --palette-ivory-70: #b9b6ac;
  --palette-ivory-80: #cfccc2; /* secondary text on Aiko's lighter chat surfaces */
  --palette-ivory-91: #e9e9e6; /* the letter */
  --palette-ivory-95: #f5f4f0;
  /* sand, a warm counterpoint: things Jason follows */
  --palette-sand-22: #463c2b;
  --palette-sand-72: #d6c09a;
  --palette-sand-88: #f0e6d1;
  /* coral: errors and what's overdue */
  --palette-coral-15: #3d150f;
  --palette-coral-25: #5b2c25;
  --palette-coral-78: #f7a297;
  --palette-coral-90: #fcd5cf;

  /* ── 2. roles (Material 3 names) ──────────────────────────────────── */
  --md-primary: var(--palette-teal-75);              /* accents: links, section heads, checks, focus */
  --md-primary-container: var(--palette-teal-24);    /* the disc */
  --md-on-primary-container: var(--palette-ivory-95);
  --md-secondary: var(--palette-teal-60);
  --md-secondary-container: var(--palette-teal-21);
  --md-on-secondary-container: var(--palette-teal-85);
  --md-tertiary: var(--palette-sand-72);
  --md-tertiary-container: var(--palette-sand-22);
  --md-on-tertiary-container: var(--palette-sand-88);
  --md-error: var(--palette-coral-78);
  --md-on-error: var(--palette-coral-15);
  --md-error-container: var(--palette-coral-25);
  --md-on-error-container: var(--palette-coral-90);
  --md-surface: var(--palette-ink-6);
  --md-on-surface: var(--palette-ivory-91);
  --md-on-surface-variant: var(--palette-ivory-70);
  --md-surface-container-lowest: var(--palette-ink-4);
  --md-surface-container-low: var(--palette-ink-10);
  --md-surface-container: var(--palette-ink-12);
  --md-surface-container-high: var(--palette-ink-15);
  --md-surface-container-highest: var(--palette-ink-17);
  --md-outline: var(--palette-teal-60);
  --md-outline-variant: var(--palette-ink-22);
  --md-inverse-surface: var(--palette-ivory-91);
  --md-inverse-on-surface: var(--palette-ink-10);

  /* ── 3. aliases: what a colour is for ─────────────────────────────── */
  /* The brand fill, as on the mark: teal with ivory. Filled buttons, Jason's
     bubbles, a switch that's on, the send button. */
  --fill-brand: var(--md-primary-container);
  --on-fill-brand: var(--md-on-primary-container);
  --fill-tonal: var(--md-secondary-container);
  --on-fill-tonal: var(--md-on-secondary-container);
  --fill-danger: var(--md-error);
  --on-fill-danger: var(--md-on-error);

  /* A run, check or criterion's outcome, as an icon colour (Log, Schedule, Review). */
  --status-ok: var(--md-primary);
  --status-muted: var(--md-outline);
  --status-bad: var(--md-error);

  /* An item's type badge: whose move it is (items.js JOBS). */
  --job-things-bg: var(--md-secondary-container);
  --job-things-fg: var(--md-on-secondary-container);
  --job-follow-bg: var(--md-tertiary-container);
  --job-follow-fg: var(--md-on-tertiary-container);
  --job-do-bg: var(--fill-brand);
  --job-do-fg: var(--on-fill-brand);

  /* An hour's level under Hours (Schedule screen): On is the brand fill, Off the quietest surface. */
  --level-on-bg: var(--fill-brand);
  --level-on-fg: var(--on-fill-brand);
  --level-off-bg: var(--md-surface-container-low);
  --level-off-fg: var(--md-on-surface-variant);

  /* State layers: the share of the content colour laid over a background. */
  --state-hover: 8%;
  --state-press: 12%;
  --state-disabled-fg: 38%;
  --state-disabled-bg: 10%;
  /* Emphasis for content that has stepped back (a closed row, a send in flight). */
  --emphasis-gone: .5;
  --emphasis-pending: .7;

  /* Elevation and scrim, from the darkest ink so shadows read on a dark page. */
  --shadow-color: var(--palette-ink-4);
  --shadow-2: 0 1px 2px color-mix(in srgb, var(--shadow-color) 60%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--shadow-color) 40%, transparent);
  --shadow-3: 0 4px 8px 3px color-mix(in srgb, var(--shadow-color) 40%, transparent), 0 1px 3px color-mix(in srgb, var(--shadow-color) 60%, transparent);
  --scrim: color-mix(in srgb, var(--shadow-color) 70%, transparent);

  /* Tints: a colour washed into a surface, for a card that carries a kind. */
  --chat-aiko: var(--palette-ink-22);              /* Aiko's bubbles and cards in Chat: well off the page */
  --on-chat-aiko-variant: var(--palette-ivory-80); /* secondary text on them, kept at 7:1 */
  --chat-aiko-outline: color-mix(in srgb, var(--md-on-surface) 22%, var(--chat-aiko)); /* an outlined button on them (outline-variant is the same ink) */
  --tint-error-card: color-mix(in srgb, var(--md-error-container) 35%, var(--chat-aiko));
  --tint-quote: 70%;                                                             /* a reply quote's share of its kind's colour */
  --tint-quote-on-brand: color-mix(in srgb, var(--on-fill-brand) 16%, transparent); /* the same, inside Jason's bubble */
  --tint-recording: color-mix(in srgb, var(--md-error) 25%, transparent);          /* the mic's pulse */

  /* ── type ─────────────────────────────────────────────────────────── */
  --font-mono: ui-monospace, 'Roboto Mono', monospace;
  --font: 'Google Sans Flex', 'Google Sans', 'Roboto Flex', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The type scale, the same on every screen (design-system.md § Type and density): words and titles, small print
     (times, meta lines, labels, code, Chat's receipt and fold lines), form fields, which stay 16px because a phone
     zooms into a smaller field on focus, and headings (the top bar, a dialog, a Markdown h1, a Review stat). */
  --text: 15px; --text-line: 22px;
  --text-small: 13px; --text-small-line: 18px;
  --text-input: 16px; --text-input-line: 24px;
  --text-title: 22px; --text-title-line: 28px;
  /* Icon sizes: beside small print, beside words or in a button, on its own (the default), an empty state's. */
  --icon-s: 16px; --icon-m: 20px; --icon: 24px; --icon-l: 40px;

  /* ── shape ────────────────────────────────────────────────────────── */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 999px;

  /* ── spacing: a 4px grid ──────────────────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;

  /* ── motion: M3 emphasized easing, and an expressive spring for shape changes ── */
  --ease: cubic-bezier(.2, 0, 0, 1); --spring: cubic-bezier(.42, 1.67, .21, .9);
}