/* ==========================================================================
   Chaffery design tokens
   One neutral system, one meaningful colour. Green is reserved for the moment
   a price meets a target (and for the brand dot) — everything else is ink.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #ffffff;
  --bg-2: #f6f6f3;
  --bg-3: #eeeeea;
  --bg-4: #e4e4df;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --overlay: rgba(255, 255, 255, 0.8);
  --scrim: rgba(18, 18, 16, 0.4);

  /* Lines */
  --line: rgba(20, 20, 15, 0.08);
  --line-2: rgba(20, 20, 15, 0.14);
  --line-3: rgba(20, 20, 15, 0.26);

  /*
   * Ink. Contrast is computed, not eyeballed (WCAG 2.1 AA): --ink … --ink-3 are text colours and keep
   * at least 4.5:1 on every surface (--bg … --bg-4); --ink-4 is for icons, separators and other
   * non-text marks only (at least 3:1) — never for words.
   */
  --ink: #121210;
  --ink-2: #4b4b45;
  --ink-3: #66665f;
  --ink-4: #85857d;
  --ink-inv: #ffffff;

  /* Accent — "price met" (4.6:1 or better as text on every surface, 5.9:1 under white text) */
  --accent: #08734b;
  --accent-vivid: #11a36b;
  --accent-soft: #e5f4ed;
  --accent-line: rgba(10, 122, 80, 0.22);
  --on-accent: #ffffff;

  /* Status */
  --warn: #8f5600;
  --warn-vivid: #d9921a;
  --warn-soft: #fcf2df;
  --danger: #b93227;
  --danger-vivid: #e5484d;
  --danger-soft: #fcebe9;
  --info: #2455b8;
  --info-soft: #e9f0fd;

  /* Product tiles (hue comes from the product) */
  --tile-s: 34%;
  --tile-l: 93.5%;
  --art-glow: rgba(255, 255, 255, 0.66);
  --art-shadow: rgba(40, 30, 15, 0.24);

  /* Chart */
  --chart-grid: rgba(20, 20, 15, 0.08);
  --chart-mute: #c9c9c2;
  --chart-ink: #2a2a27;

  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
    "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
    "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(15, 15, 10, 0.05), 0 0 0 0.5px rgba(15, 15, 10, 0.06);
  --shadow-2: 0 6px 20px rgba(15, 15, 10, 0.07), 0 1px 3px rgba(15, 15, 10, 0.05);
  --shadow-3: 0 16px 48px rgba(15, 15, 10, 0.14), 0 2px 8px rgba(15, 15, 10, 0.06), 0 0 0 0.5px rgba(15, 15, 10, 0.1);
  --shadow-4: 0 40px 96px rgba(15, 15, 10, 0.28), 0 8px 24px rgba(15, 15, 10, 0.1), 0 0 0 0.5px rgba(15, 15, 10, 0.12);
  --shadow-knob: 0 2px 6px rgba(15, 15, 10, 0.16), 0 0 0 0.5px rgba(15, 15, 10, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --t-1: 120ms;
  --t-2: 200ms;
  --t-3: 320ms;
  --t-4: 480ms;
  --t-5: 720ms;

  /* Layout */
  --nav-h: 56px;
  --gutter: clamp(20px, 4.4vw, 48px);
  --content: 1200px;
}

/* Dark — chosen values, not an inversion. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0c0b;
    --bg-2: #151513;
    --bg-3: #1e1e1c;
    --bg-4: #292926;
    --surface: #151513;
    --surface-raised: #1f1f1d;
    --overlay: rgba(12, 12, 11, 0.76);
    --scrim: rgba(0, 0, 0, 0.6);
    --line: rgba(255, 255, 250, 0.09);
    --line-2: rgba(255, 255, 250, 0.15);
    --line-3: rgba(255, 255, 250, 0.28);
    --ink: #f5f5f1;
    --ink-2: #b9b9b1;
    --ink-3: #94948c;
    --ink-4: #6e6e67;
    --ink-inv: #0c0c0b;
    --accent: #45d696;
    --accent-vivid: #2fc283;
    --accent-soft: rgba(69, 214, 150, 0.13);
    --accent-line: rgba(69, 214, 150, 0.3);
    --on-accent: #04130c;
    --warn: #f0b650;
    --warn-vivid: #e0a030;
    --warn-soft: rgba(240, 182, 80, 0.13);
    --danger: #ff7b72;
    --danger-vivid: #f0605a;
    --danger-soft: rgba(255, 123, 114, 0.13);
    --info: #86aefc;
    --info-soft: rgba(134, 174, 252, 0.13);
    --tile-s: 12%;
    --tile-l: 17%;
    --art-glow: rgba(255, 255, 250, 0.17);
    --art-shadow: rgba(0, 0, 0, 0.55);
    --chart-grid: rgba(255, 255, 250, 0.09);
    --chart-mute: #4a4a45;
    --chart-ink: #e6e6e0;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 250, 0.08);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 250, 0.08);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.56), 0 0 0 0.5px rgba(255, 255, 250, 0.12);
    --shadow-4: 0 40px 96px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 250, 0.12);
    --shadow-knob: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0b;
  --bg-2: #151513;
  --bg-3: #1e1e1c;
  --bg-4: #292926;
  --surface: #151513;
  --surface-raised: #1f1f1d;
  --overlay: rgba(12, 12, 11, 0.76);
  --scrim: rgba(0, 0, 0, 0.6);
  --line: rgba(255, 255, 250, 0.09);
  --line-2: rgba(255, 255, 250, 0.15);
  --line-3: rgba(255, 255, 250, 0.28);
  --ink: #f5f5f1;
  --ink-2: #b9b9b1;
  --ink-3: #94948c;
  --ink-4: #6e6e67;
  --ink-inv: #0c0c0b;
  --accent: #45d696;
  --accent-vivid: #2fc283;
  --accent-soft: rgba(69, 214, 150, 0.13);
  --accent-line: rgba(69, 214, 150, 0.3);
  --on-accent: #04130c;
  --warn: #f0b650;
  --warn-vivid: #e0a030;
  --warn-soft: rgba(240, 182, 80, 0.13);
  --danger: #ff7b72;
  --danger-vivid: #f0605a;
  --danger-soft: rgba(255, 123, 114, 0.13);
  --info: #86aefc;
  --info-soft: rgba(134, 174, 252, 0.13);
  --tile-s: 12%;
  --tile-l: 17%;
  --art-glow: rgba(255, 255, 250, 0.17);
  --art-shadow: rgba(0, 0, 0, 0.55);
  --chart-grid: rgba(255, 255, 250, 0.09);
  --chart-mute: #4a4a45;
  --chart-ink: #e6e6e0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 250, 0.08);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 250, 0.08);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.56), 0 0 0 0.5px rgba(255, 255, 250, 0.12);
  --shadow-4: 0 40px 96px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 250, 0.12);
  --shadow-knob: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}