/* Single source for appearance tokens. SPA (web/src) and server HTML
   templates both consume this file so feed / take / legal pages cannot drift. */
:root,
[data-theme='default'] {
  --bg: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.03);
  --bg-press: rgba(0, 0, 0, 0.05);
  --bg-elevated: rgba(255, 255, 255, 0.72);
  --bg-elevated-solid: #ffffff;
  --surface: #fafafa;
  --ink: #1d1d1f;
  --ink-secondary: #6e6e73;
  --ink-tertiary: #86868b;
  --line: #e8e8ed;
  --line-strong: #d2d2d7;
  --accent: #8058eb;
  --accent-deep: #6b3fd9;
  --accent-soft: rgba(128, 88, 235, 0.11);
  --accent-soft-strong: rgba(128, 88, 235, 0.18);
  --accent-soft-hover: rgba(128, 88, 235, 0.14);
  --accent-soft-cta: rgba(128, 88, 235, 0.16);
  --accent-pulse: rgba(128, 88, 235, 0.42);
  --quote-bg: #f5f5f7;
  --skeleton-mid: #f0f0f5;
  --danger: #ff3b30;
  --scrim: rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-avatar: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.18);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.08);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --chrome-h: 56px;
  --col: 600px;
  --rail: 320px;
  --gap: 24px;
  --shell: calc(var(--col) + var(--gap) + var(--rail));
}

[data-theme='dim'] {
  --bg: #15202b;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-press: rgba(255, 255, 255, 0.08);
  --bg-elevated: rgba(21, 32, 43, 0.78);
  --bg-elevated-solid: #15202b;
  --surface: #192734;
  --ink: #f7f9f9;
  --ink-secondary: #8b98a5;
  --ink-tertiary: #6e767d;
  --line: #38444d;
  --line-strong: #5b7083;
  --accent: #8b6ef0;
  --accent-deep: #8058eb;
  --accent-soft: rgba(139, 110, 240, 0.16);
  --accent-soft-strong: rgba(139, 110, 240, 0.28);
  --accent-soft-hover: rgba(139, 110, 240, 0.2);
  --accent-soft-cta: rgba(139, 110, 240, 0.22);
  --accent-pulse: rgba(139, 110, 240, 0.48);
  --quote-bg: #192734;
  --skeleton-mid: #22303c;
  --danger: #f4212e;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-avatar: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.45);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme='lights-out'] {
  --bg: #000000;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-press: rgba(255, 255, 255, 0.08);
  --bg-elevated: rgba(0, 0, 0, 0.72);
  --bg-elevated-solid: #000000;
  --surface: #16181c;
  --ink: #e7e9ea;
  --ink-secondary: #71767b;
  --ink-tertiary: #536471;
  --line: #2f3336;
  --line-strong: #3e4144;
  --accent: #8b6ef0;
  --accent-deep: #8058eb;
  --accent-soft: rgba(139, 110, 240, 0.16);
  --accent-soft-strong: rgba(139, 110, 240, 0.28);
  --accent-soft-hover: rgba(139, 110, 240, 0.2);
  --accent-soft-cta: rgba(139, 110, 240, 0.22);
  --accent-pulse: rgba(139, 110, 240, 0.48);
  --quote-bg: #16181c;
  --skeleton-mid: #1e2024;
  --danger: #f4212e;
  --scrim: rgba(0, 0, 0, 0.65);
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-avatar: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.55);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html {
  color-scheme: light;
}

html[data-theme='dim'],
html[data-theme='lights-out'] {
  color-scheme: dark;
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-theme='default'] {
    --bg-elevated: #ffffff;
  }

  [data-theme='dim'] {
    --bg-elevated: #15202b;
  }

  [data-theme='lights-out'] {
    --bg-elevated: #000000;
  }
}