/* Ridgeline (demo) — design tokens. Light is default; dark via [data-theme="dark"].
   Every component reads these tokens only — no hard-coded colors elsewhere. */
:root {
  color-scheme: light;

  /* Surfaces */
  --stage: #E2DACA;
  --bg: #F3EEE4;
  --bg-2: #EAE3D4;
  --surface: #FBF8F2;
  --surface-2: #F0E9DB;
  --raise: #FFFFFF;

  /* Ink */
  --ink: #16191C;
  --ink-2: #444A50;
  --ink-3: #595E64;
  --line: rgba(22, 25, 28, .12);
  --line-2: rgba(22, 25, 28, .26);

  /* Brand */
  --accent: #D43B12;
  --accent-press: #B3300C;
  --on-accent: #FFFFFF;
  --accent-text: #B3300C;
  --accent-soft: #F8DDD2;
  --pine: #1E4A3C;
  --pine-text: #1E4A3C;
  --pine-soft: #D8E6DE;
  --on-pine: #F4EEE3;

  /* Status */
  --good: #23693F;   --good-soft: #D6EBDD;
  --warn: #8A5509;   --warn-soft: #F4E3BF;
  --bad: #A8231B;    --bad-soft: #F6D8D4;
  --info: #2A5583;   --info-soft: #D9E5F1;

  /* Inverse slab (hero cards) */
  --inv-bg: #16191C;
  --inv-ink: #F4EEE3;
  --inv-ink-2: #BDB6A8;
  --inv-line: rgba(244, 238, 227, .18);

  /* Charts */
  --chart-line: var(--accent);
  --chart-fill: rgba(212, 59, 18, .10);
  --chart-grid: rgba(22, 25, 28, .10);
  --chart-axis: #595E64;
  --chart-alt: var(--pine);
  --chart-bar: #CFC4AE;

  /* Art (welcome illustration) */
  --art-sky: #EADFC9;
  --art-sun: #D43B12;
  --art-dots: rgba(22, 25, 28, .28);
  --art-r3: #CDBB95;
  --art-r2: #5F8473;
  --art-r1: #1E4A3C;
  --art-trail: #FBF8F2;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(22, 25, 28, .06), 0 8px 22px rgba(22, 25, 28, .07);
  --shadow-2: 0 18px 60px rgba(22, 25, 28, .28);
  --scrim: rgba(22, 25, 28, .52);
  --bezel: #101214;
  --focus: #16191C;
  --key-shadow: rgba(22, 25, 28, .22);

  /* Type */
  --f-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: 20px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --stage: #0B0A08;
  --bg: #14120F;
  --bg-2: #1B1814;
  --surface: #1E1B16;
  --surface-2: #29251E;
  --raise: #26221B;

  --ink: #F4EEE3;
  --ink-2: #CBC3B3;
  --ink-3: #A29A8A;
  --line: rgba(244, 238, 227, .14);
  --line-2: rgba(244, 238, 227, .30);

  --accent: #FF7448;
  --accent-press: #FF8E69;
  --on-accent: #1A0E08;
  --accent-text: #FF8E69;
  --accent-soft: #3B2118;
  --pine: #7FC6A8;
  --pine-text: #8FD0B3;
  --pine-soft: #1F3029;
  --on-pine: #0F1A15;

  --good: #6FCB92;   --good-soft: #1B3326;
  --warn: #E6B25A;   --warn-soft: #382B12;
  --bad: #FF8F85;    --bad-soft: #3C1D1A;
  --info: #8DB8E8;   --info-soft: #1C2B3C;

  --inv-bg: #2D2820;
  --inv-ink: #F4EEE3;
  --inv-ink-2: #C7BFAF;
  --inv-line: rgba(244, 238, 227, .16);

  --chart-line: #FF7448;
  --chart-fill: rgba(255, 116, 72, .13);
  --chart-grid: rgba(244, 238, 227, .11);
  --chart-axis: #A29A8A;
  --chart-alt: #7FC6A8;
  --chart-bar: #4A4337;

  --art-sky: #2A2018;
  --art-sun: #FF7448;
  --art-dots: rgba(244, 238, 227, .30);
  --art-r3: #4A3A2A;
  --art-r2: #2F5646;
  --art-r1: #17332A;
  --art-trail: #F4EEE3;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 60px rgba(0, 0, 0, .7);
  --scrim: rgba(0, 0, 0, .64);
  --bezel: #000000;
  --focus: #F4EEE3;
  --key-shadow: rgba(0, 0, 0, .55);
}