/* ============================================================================
   Sidekick brand tokens: colour, type, space, shape, motion (see hud/BRAND.md).
   One source of truth for the Review window (review/styles.css imports it) and the website
   (site/build/build.mjs copies it to /assets/brand.css; site/tests/brand.test.mjs fails when they differ).
   Light first; dark through prefers-color-scheme, which the app's Theme setting drives.
   ========================================================================== */
:root {
  /* colour: light */
  --bg: #f6f7f9;
  --side: #eef0f3;
  --surface: #ffffff;
  --hover: #e7eaee;
  --selected: #e1e5ea;
  --hair: #dde1e6;
  --hair-strong: #c9cfd6;
  --text: #0e1013;
  --text2: #545b64;
  --text3: #8a9099;
  --accent: #16a34a;
  --accent-strong: #15803d;
  --on-accent: #ffffff;
  --tint: rgba(22, 163, 74, 0.1);
  --focus: rgba(22, 163, 74, 0.4);
  --signal: #22c55e; /* the logo dot */
  --danger: #dc2626;
  --pop-shadow: 0 8px 28px rgba(14, 16, 19, 0.12);

  /* type */
  --ui: 'Geist Variable', -apple-system, system-ui, sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15.5px; --fs-18: 18px; --fs-22: 22px; --fs-26: 26px; --fs-34: 34px;
  --track-body: -0.006em;
  --track-head: -0.018em;

  /* space: 4 px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  --col: 760px;

  /* shape */
  --r-key: 4px;
  --r-ctl: 8px;
  --r-card: 12px;

  /* motion */
  --d1: 120ms; --d2: 200ms; --d3: 320ms; --d4: 560ms;
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);

  --side-w: 296px;
  color-scheme: light dark;

  /* meaning (used by the Review tab and Growth: growth.css) */
  --neg: var(--danger);
  --neg-tint: color-mix(in srgb, var(--danger) 11%, transparent);
  --pos-tint: var(--tint);
  --mid: #d4a017;
  --accent-text: #15803d; /* mint as text on a surface: --accent-strong in light, --accent in dark */

  /* the HUD's glass, for surfaces that draw a HUD card outside the HUD window (the website). The HUD window keeps
     its own tokens in common/tokens.css; these mirror its dark glass. */
  --hud-glass: rgba(22, 22, 26, 0.78);
  --hud-hair: rgba(255, 255, 255, 0.1);
  --hud-top: rgba(255, 255, 255, 0.06);
  --hud-t1: rgba(255, 255, 255, 0.95);
  --hud-t2: rgba(255, 255, 255, 0.7);
  --hud-t3: rgba(255, 255, 255, 0.45);
  --hud-chip: rgba(255, 255, 255, 0.08);
  --hud-key: rgba(0, 0, 0, 0.35);
  --hud-mint: #4ade80;
  --hud-mint-ink: #062d16;
  --hud-shadow: 0 0 0 1px var(--hud-hair), inset 0 1px 0 var(--hud-top), 0 10px 30px -6px rgba(0, 0, 0, 0.42), 0 2px 8px -2px rgba(0, 0, 0, 0.25);
  --scrim: rgba(11, 12, 14, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0e;
    --side: #0f1013;
    --surface: #15171b;
    --hover: #1b1d22;
    --selected: #20232a;
    --hair: #23262d;
    --hair-strong: #2e323a;
    --text: #e8eaed;
    --text2: #9ba1a9;
    --text3: #6b717a;
    --accent: #4ade80;
    --accent-strong: #22c55e;
    --on-accent: #04130a;
    --tint: rgba(74, 222, 128, 0.12);
    --focus: rgba(74, 222, 128, 0.45);
    --signal: #4ade80;
    --danger: #f87171;
    --pop-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    --mid: #e0b84a;
    --accent-text: #4ade80;
  }
}

/* ---------------------------------------------------------------- generated by site/build/build.mjs
   The website's theme toggle (Dark / Light / System): the same two blocks, keyed on html[data-theme]. With no
   attribute the page follows the system, like the app's System setting. */
:root[data-theme='light'] {
  --bg: #f6f7f9;
  --side: #eef0f3;
  --surface: #ffffff;
  --hover: #e7eaee;
  --selected: #e1e5ea;
  --hair: #dde1e6;
  --hair-strong: #c9cfd6;
  --text: #0e1013;
  --text2: #545b64;
  --text3: #8a9099;
  --accent: #16a34a;
  --accent-strong: #15803d;
  --on-accent: #ffffff;
  --tint: rgba(22, 163, 74, 0.1);
  --focus: rgba(22, 163, 74, 0.4);
  --signal: #22c55e;
  --danger: #dc2626;
  --pop-shadow: 0 8px 28px rgba(14, 16, 19, 0.12);
  --ui: 'Geist Variable', -apple-system, system-ui, sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15.5px; --fs-18: 18px; --fs-22: 22px; --fs-26: 26px; --fs-34: 34px;
  --track-body: -0.006em;
  --track-head: -0.018em;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  --col: 760px;
  --r-key: 4px;
  --r-ctl: 8px;
  --r-card: 12px;
  --d1: 120ms; --d2: 200ms; --d3: 320ms; --d4: 560ms;
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --side-w: 296px;
  --neg: var(--danger);
  --neg-tint: color-mix(in srgb, var(--danger) 11%, transparent);
  --pos-tint: var(--tint);
  --mid: #d4a017;
  --accent-text: #15803d;
  --hud-glass: rgba(22, 22, 26, 0.78);
  --hud-hair: rgba(255, 255, 255, 0.1);
  --hud-top: rgba(255, 255, 255, 0.06);
  --hud-t1: rgba(255, 255, 255, 0.95);
  --hud-t2: rgba(255, 255, 255, 0.7);
  --hud-t3: rgba(255, 255, 255, 0.45);
  --hud-chip: rgba(255, 255, 255, 0.08);
  --hud-key: rgba(0, 0, 0, 0.35);
  --hud-mint: #4ade80;
  --hud-mint-ink: #062d16;
  --hud-shadow: 0 0 0 1px var(--hud-hair), inset 0 1px 0 var(--hud-top), 0 10px 30px -6px rgba(0, 0, 0, 0.42), 0 2px 8px -2px rgba(0, 0, 0, 0.25);
  --scrim: rgba(11, 12, 14, 0.55);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0b0c0e;
  --side: #0f1013;
  --surface: #15171b;
  --hover: #1b1d22;
  --selected: #20232a;
  --hair: #23262d;
  --hair-strong: #2e323a;
  --text: #e8eaed;
  --text2: #9ba1a9;
  --text3: #6b717a;
  --accent: #4ade80;
  --accent-strong: #22c55e;
  --on-accent: #04130a;
  --tint: rgba(74, 222, 128, 0.12);
  --focus: rgba(74, 222, 128, 0.45);
  --signal: #4ade80;
  --danger: #f87171;
  --pop-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  --mid: #e0b84a;
  --accent-text: #4ade80;
  color-scheme: dark;
}