/* Design tokens — the single place color values are declared.
   Three layers: primitives (--lch-*) hold raw OKLCH triples; the semantic
   layer (--color-*) is the only one components read; scopes (dark mode,
   [data-accent], the contrast sidebar) rebind primitives locally. */

:root {
  color-scheme: light dark;

  /* Primitives — light values */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-always-black: 0% 0 0;
  --lch-gray-darker: 75% 0.005 96;
  --lch-gray-darkest: 65% 0.005 96;

  --lch-ink: 20.4% 0.007 258;
  --lch-ink-1: 33.9% 0.014 257;
  --lch-ink-2: 50.4% 0.018 257;
  --lch-ink-3: 70.3% 0.018 256;
  --lch-line: 93.4% 0.006 265;
  --lch-line-2: 95.8% 0.004 271;
  --lch-raise: 100% 0 0;
  --lch-sunk: 98.5% 0.001 286;
  --lch-hover: 97.6% 0.003 265;
  --lch-control: 73% 0.005 96;

  /* The bench edge — the signature two-tone split between the sidebar
     field and the paper content. Hue 84 leans warm ("warm wood on the
     walls") so the split reads intentional, not just darker gray. */
  --lch-side: 96% 0.007 84;
  --lch-side-hover: 93% 0.011 82;
  --lch-side-line: 88.5% 0.013 82;

  --lch-green: 57.4% 0.135 155;
  --lch-red: 57% 0.168 26;
  --lch-red-light: 98% 0.08 22;
  --lch-orange: 61% 0.129 70;

  /* Primitives — dark values, declared once. The two dark scopes at the
     bottom of this file only bind them, so the auto (media query) and
     explicit ([data-theme="dark"]) paths can never drift apart. */
  --dark-lch-black: 100% 0 0;
  --dark-lch-white: 19.6% 0.008 274;
  --dark-lch-gray-darker: 44.95% 0 0;
  --dark-lch-gray-darkest: 64.95% 0 0;
  --dark-lch-ink: 95.2% 0.006 265;
  --dark-lch-ink-1: 87.5% 0.011 262;
  --dark-lch-ink-2: 70.3% 0.018 256;
  --dark-lch-ink-3: 55.3% 0.019 259;
  --dark-lch-line: 28.6% 0.013 273;
  --dark-lch-line-2: 25.7% 0.012 271;
  --dark-lch-raise: 23.1% 0.01 268;
  --dark-lch-sunk: 21% 0.01 277;
  --dark-lch-hover: 24.8% 0.012 271;
  --dark-lch-control: 40% 0 0;
  --dark-lch-side: 16% 0.008 278;
  --dark-lch-side-hover: 20.5% 0.01 274;
  --dark-lch-side-line: 25.7% 0.012 271;
  --dark-lch-green: 75% 0.145 158;
  --dark-lch-red: 68.7% 0.14 24;
  --dark-lch-red-light: 28% 0.05 20;
  --dark-lch-orange: 74.9% 0.123 78;

  /* Named page and contrast surfaces keep palette values out of component
     scopes. The public --color-* layer below remains what components read. */
  --color-page-bg: oklch(var(--lch-white));
  --color-page-bg-raised: oklch(var(--lch-raise));
  --color-page-bg-sunk: oklch(var(--lch-sunk));
  --color-page-bg-hover: oklch(var(--lch-hover));
  --color-page-text: oklch(var(--lch-ink));
  --color-page-text-lighter: oklch(var(--lch-ink-1));
  --color-page-text-muted: oklch(var(--lch-ink-2));
  --color-page-text-subtle: oklch(var(--lch-ink-3));
  --color-page-border: oklch(var(--lch-line-2));
  --color-page-border-dark: oklch(var(--lch-line));
  --color-page-selected: oklch(var(--lch-accent-bg));
  --color-page-accent-brand: oklch(var(--lch-accent));

  /* The default sidebar is a dark contrast surface in both themes. These
     named values keep literal palette colours out of component scopes. */
  --color-sidebar-contrast-bg: oklch(21% 0.01 277);
  --color-sidebar-contrast-bg-raised: oklch(24% 0.012 271);
  --color-sidebar-contrast-bg-hover: oklch(26.5% 0.013 273);
  --color-sidebar-contrast-border: oklch(28.2% 0.013 273);
  --color-sidebar-contrast-text: oklch(100% 0 0);
  --color-sidebar-contrast-text-lighter: oklch(92.7% 0.009 265);
  --color-sidebar-contrast-text-muted: oklch(73% 0.017 263);
  --color-sidebar-contrast-text-subtle: oklch(57.2% 0.02 264);

  /* Semantic — the only layer components read */
  --color-bg: var(--color-page-bg);
  --color-bg-raised: var(--color-page-bg-raised);
  --color-bg-sunk: var(--color-page-bg-sunk);
  --color-bg-hover: var(--color-page-bg-hover);
  --color-bg-negative: oklch(var(--lch-red-light));
  --color-bg-side: oklch(var(--lch-side));
  --color-bg-side-hover: oklch(var(--lch-side-hover));
  --color-border-side: oklch(var(--lch-side-line));

  --color-text: var(--color-page-text);
  --color-text-lighter: var(--color-page-text-lighter);
  --color-text-muted: var(--color-page-text-muted);
  /* Subtle clears 3:1 contrast but not 4.5:1 — decorative meta only
     (timestamps, counts, section labels); load-bearing text uses muted. */
  --color-text-subtle: var(--color-page-text-subtle);
  --color-text-reversed: oklch(var(--lch-white));

  --color-border: var(--color-page-border);
  --color-border-subtle: oklch(var(--lch-ink-2));
  --color-border-dark: var(--color-page-border-dark);
  --color-border-darker: oklch(var(--lch-gray-darker));
  --color-border-darkest: oklch(var(--lch-gray-darkest));
  --control-border: oklch(var(--lch-control));

  --color-accent-brand: var(--color-page-accent-brand);
  --color-link: var(--color-accent-brand);
  --color-selected: var(--color-page-selected);
  --color-selected-dark: oklch(var(--lch-accent-bd));

  --color-negative: oklch(var(--lch-red));
  --color-positive: oklch(var(--lch-green));
  --color-alert: oklch(var(--lch-orange));
  --color-alert-bg: oklch(var(--lch-orange) / 0.10);
  --color-alert-border: oklch(var(--lch-orange) / 0.34);
  --color-positive-border: oklch(var(--lch-green) / 0.34);
  --color-negative-bg: oklch(var(--lch-red) / 0.08);
  --color-message-mentioned: oklch(var(--lch-red) / 0.09);
  --color-scrim: oklch(var(--lch-always-black) / 0.16);

  /* Elevation */
  --shadow-raise: 0 1px 2px oklch(var(--lch-always-black) / 0.04);
  --shadow-pop: 0 3px 12px oklch(var(--lch-always-black) / 0.1);
  --shadow-overlay: 0 12px 40px oklch(var(--lch-always-black) / 0.28);
  --shadow-panel: -18px 0 44px oklch(var(--lch-always-black) / 0.2);
}

/* Accent scopes — one selectable hue per workspace; indigo is the default.
   Each block carries the light triple plus the lift used on dark grounds.
   Selection tints derive from the lift in dark mode (see the dark scopes),
   so a new accent only ever needs these four values.

   The selector is attribute-only rather than :root-anchored so a single
   element can carry an accent that isn't the page's — the SaaS workspace rail
   stamps [data-accent] on each mark to paint ten workspaces in their own
   colours. An element-level scope rebinds the primitives for that subtree, so
   properties declared *on* the mark (never inherited ones, which are already
   substituted at :root) resolve to the workspace's hue. Dark mode rebinds
   --lch-accent to the lift on :root only, so element scopes that sit on a dark
   ground read --lch-accent-lift directly. */
:root,
[data-accent="indigo"] {
  --lch-accent: 51.9% 0.202 276;
  --lch-accent-bg: 95.5% 0.019 283;
  --lch-accent-bd: 89.5% 0.045 284;
  --lch-accent-lift: 65.8% 0.159 280;
}

[data-accent="ink"] {
  --lch-accent: 32.9% 0.025 266;
  --lch-accent-bg: 94.9% 0.004 271;
  --lch-accent-bd: 88.8% 0.01 267;
  --lch-accent-lift: 77.5% 0.024 264;
}

[data-accent="forest"] {
  --lch-accent: 48.6% 0.09 165;
  --lch-accent-bg: 95.2% 0.013 167;
  --lch-accent-bd: 88.5% 0.03 170;
  --lch-accent-lift: 73.5% 0.109 164;
}

[data-accent="rust"] {
  --lch-accent: 52.4% 0.13 41;
  --lch-accent-bg: 95.3% 0.014 46;
  --lch-accent-bd: 88.1% 0.032 45;
  --lch-accent-lift: 71.5% 0.114 45;
}

[data-accent="plum"] {
  --lch-accent: 47.7% 0.138 317;
  --lch-accent-bg: 94.9% 0.017 317;
  --lch-accent-bd: 87.4% 0.044 318;
  --lch-accent-lift: 71.8% 0.11 317;
}

[data-accent="teal"] {
  --lch-accent: 50% 0.095 192;
  --lch-accent-bg: 95.2% 0.015 192;
  --lch-accent-bd: 88.4% 0.032 192;
  --lch-accent-lift: 73.5% 0.105 192;
}

[data-accent="ocean"] {
  --lch-accent: 50% 0.15 253;
  --lch-accent-bg: 95.3% 0.019 253;
  --lch-accent-bd: 88.6% 0.045 253;
  --lch-accent-lift: 67% 0.13 253;
}

[data-accent="amber"] {
  --lch-accent: 52% 0.11 80;
  --lch-accent-bg: 95.2% 0.016 80;
  --lch-accent-bd: 88.2% 0.036 80;
  --lch-accent-lift: 74% 0.12 80;
}

/* Dark scopes — bind the --dark-* primitives declared above. Keep the two
   blocks identical; values belong in the --dark-* declarations, never here.
   These come after the accent scopes so the accent lift wins on dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lch-black: var(--dark-lch-black);
    --lch-white: var(--dark-lch-white);
    --lch-gray-darker: var(--dark-lch-gray-darker);
    --lch-gray-darkest: var(--dark-lch-gray-darkest);
    --lch-ink: var(--dark-lch-ink);
    --lch-ink-1: var(--dark-lch-ink-1);
    --lch-ink-2: var(--dark-lch-ink-2);
    --lch-ink-3: var(--dark-lch-ink-3);
    --lch-line: var(--dark-lch-line);
    --lch-line-2: var(--dark-lch-line-2);
    --lch-raise: var(--dark-lch-raise);
    --lch-sunk: var(--dark-lch-sunk);
    --lch-hover: var(--dark-lch-hover);
    --lch-control: var(--dark-lch-control);
    --lch-side: var(--dark-lch-side);
    --lch-side-hover: var(--dark-lch-side-hover);
    --lch-side-line: var(--dark-lch-side-line);
    --color-sidebar-contrast-bg: oklch(var(--dark-lch-side));
    --color-sidebar-contrast-bg-raised: oklch(var(--dark-lch-side-hover));
    --color-sidebar-contrast-bg-hover: oklch(var(--dark-lch-side-hover));
    --color-sidebar-contrast-border: oklch(var(--dark-lch-side-line));
    --lch-green: var(--dark-lch-green);
    --lch-red: var(--dark-lch-red);
    --lch-red-light: var(--dark-lch-red-light);
    --lch-orange: var(--dark-lch-orange);
    --lch-accent: var(--lch-accent-lift);
    --lch-accent-bg: var(--lch-accent-lift) / 0.15;
    --lch-accent-bd: var(--lch-accent-lift) / 0.34;
    --color-message-mentioned: oklch(var(--lch-red) / 0.16);
  }
}

:root[data-theme="dark"] {
  --lch-black: var(--dark-lch-black);
  --lch-white: var(--dark-lch-white);
  --lch-gray-darker: var(--dark-lch-gray-darker);
  --lch-gray-darkest: var(--dark-lch-gray-darkest);
  --lch-ink: var(--dark-lch-ink);
  --lch-ink-1: var(--dark-lch-ink-1);
  --lch-ink-2: var(--dark-lch-ink-2);
  --lch-ink-3: var(--dark-lch-ink-3);
  --lch-line: var(--dark-lch-line);
  --lch-line-2: var(--dark-lch-line-2);
  --lch-raise: var(--dark-lch-raise);
  --lch-sunk: var(--dark-lch-sunk);
  --lch-hover: var(--dark-lch-hover);
  --lch-control: var(--dark-lch-control);
  --lch-side: var(--dark-lch-side);
  --lch-side-hover: var(--dark-lch-side-hover);
  --lch-side-line: var(--dark-lch-side-line);
  --color-sidebar-contrast-bg: oklch(var(--dark-lch-side));
  --color-sidebar-contrast-bg-raised: oklch(var(--dark-lch-side-hover));
  --color-sidebar-contrast-bg-hover: oklch(var(--dark-lch-side-hover));
  --color-sidebar-contrast-border: oklch(var(--dark-lch-side-line));
  --lch-green: var(--dark-lch-green);
  --lch-red: var(--dark-lch-red);
  --lch-red-light: var(--dark-lch-red-light);
  --lch-orange: var(--dark-lch-orange);
  --lch-accent: var(--lch-accent-lift);
  --lch-accent-bg: var(--lch-accent-lift) / 0.15;
  --lch-accent-bd: var(--lch-accent-lift) / 0.34;
  --color-message-mentioned: oklch(var(--lch-red) / 0.16);
}