/* Single source of every color literal.
   Hue 296.62 is measured from brand/LOGO WHAPPER PNG.png (pixel 8B3DF5 = oklch 0.5669 0.2528 296.62).
   Neutrals carry that same hue at low chroma. No other hue appears anywhere. */
:root {
  color-scheme: dark;

  --brand:         oklch(0.5669 0.2528 296.62);
  --neutral-0:    oklch(0.99 0.008 296.62);
  --neutral-100:  oklch(0.9 0.02 296.62);
  --neutral-200:  oklch(0.78 0.03 296.62);
  --neutral-300:  oklch(0.66 0.035 296.62);
  --neutral-400:  oklch(0.52 0.04 296.62);
  --neutral-500:  oklch(0.4 0.04 296.62);
  --neutral-600:  oklch(0.3 0.04 296.62);
  --neutral-700:  oklch(0.24 0.035 296.62);
  --neutral-800:  oklch(0.19 0.03 296.62);
  --neutral-900:  oklch(0.15 0.026 296.62);
  --neutral-1000: oklch(0.1 0.018 296.62);

  --accent:        var(--brand);
  --accent-hover:  oklch(0.5 0.25 296.62);
  --accent-text:   oklch(0.78 0.14 296.62);
  --on-accent:     oklch(1 0 296.62);
  --accent-tint-1: oklch(0.5669 0.2528 296.62 / 0.22);
  --accent-tint-2: oklch(0.5669 0.2528 296.62 / 0.5);

  --light-hover:   oklch(0.9 0.05 296.62 / 0.1);
  --light-pressed: oklch(0.9 0.05 296.62 / 0.2);
  --backdrop:      oklch(0.05 0.02 296.62 / 0.64);
  --surface-floating: oklch(0.1 0.018 296.62 / 0.8);
  --shadow-overlay: 0 12px 24px oklch(0.04 0.02 296.62 / 0.6);
  --glow: 0 0 40px oklch(0.5669 0.2528 296.62 / 0.35);
  --glow-strong: 0 0 80px oklch(0.5669 0.2528 296.62 / 0.55);

  --matrix-dim:  oklch(0.4 0.14 296.62);
  --matrix-mid:  oklch(0.62 0.2 296.62);
  --matrix-head: oklch(0.95 0.05 296.62);

  --spacing-xxxs: 3px; --spacing-xxs: 6px; --spacing-xs: 8px; --spacing-s: 12px;
  --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 36px; --spacing-xxl: 48px; --spacing-xxxl: 96px;
  --radius-xs: 6px; --radius-s: 10px; --radius-m: 14px; --radius-l: 20px; --radius-xl: 28px; --radius-full: 9999px;
  --content-max: 1200px;
  --gutter: 24px;
  --header-height: 60px;
  --tap: 44px;
  --transition-base: 0.15s ease;
  --transition-lift: 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-reveal: 1s ease;
  --font-text: 'Geist', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Light panels re-map the same ramp, same hue. */
[data-panel='light'] {
  color-scheme: light;

  --neutral-0:    oklch(0.17 0.03 296.62);
  --neutral-100:  oklch(0.26 0.04 296.62);
  --neutral-200:  oklch(0.4 0.045 296.62);
  --neutral-300:  oklch(0.5 0.045 296.62);
  --neutral-400:  oklch(0.7 0.035 296.62);
  --neutral-500:  oklch(0.83 0.025 296.62);
  --neutral-600:  oklch(0.89 0.02 296.62);
  --neutral-700:  oklch(0.945 0.014 296.62);
  --neutral-800:  oklch(0.965 0.01 296.62);
  --neutral-900:  oklch(0.98 0.006 296.62);
  --neutral-1000: oklch(0.995 0.003 296.62);

  --accent:        var(--brand);
  --accent-hover:  oklch(0.5 0.25 296.62);
  --accent-text:   oklch(0.47 0.25 296.62);
  --accent-tint-1: oklch(0.5669 0.2528 296.62 / 0.12);
  --accent-tint-2: oklch(0.5669 0.2528 296.62 / 0.4);

  --light-hover:   oklch(0.5669 0.2528 296.62 / 0.07);
  --light-pressed: oklch(0.5669 0.2528 296.62 / 0.14);
  --shadow-overlay: 0 12px 24px oklch(0.3 0.08 296.62 / 0.14);
  --glow: 0 0 32px oklch(0.5669 0.2528 296.62 / 0.2);
}

@media (max-width: 1023.98px) {
  :root { --content-max: 100%; }
}
@media (max-width: 767.98px) {
  :root { --gutter: 16px; --header-height: 52px; }
}