/* Noord Studio tokens — hue 275 OKLCH. SSOT aligned with DESIGN.md.
   Theme modes: Auto (OS), Light, Dark via data-theme + theme picker.
   First-visit default mode: pending Director decision. Auto follows the OS.
   Dark semantics in :root are a CSS fallback only (no media-query support). */

:root {
  /* Brand indigo (hue 275) */
  --p1:  oklch(0.97 0.004 275);
  --p7:  oklch(0.48 0.140 275);
  --p8:  oklch(0.40 0.155 275);
  --p9:  oklch(0.33 0.180 275);
  --p10: oklch(0.26 0.160 275);
  --p11: oklch(0.19 0.130 275);
  --p12: oklch(0.12 0.090 275);

  /* Cold gray (hue 275, near-zero chroma) */
  --g2:  oklch(0.96 0.005 275);
  --g3:  oklch(0.92 0.007 275);
  --g4:  oklch(0.87 0.008 275);
  --g5:  oklch(0.78 0.009 275);
  --g6:  oklch(0.68 0.010 275);
  --g7:  oklch(0.57 0.011 275);
  --g8:  oklch(0.44 0.012 275);
  --g9:  oklch(0.32 0.013 275);
  --g10: oklch(0.22 0.014 275);
  --g11: oklch(0.15 0.013 275);
  --g12: oklch(0.09 0.009 275);

  --f-display: "Geist", system-ui, -apple-system, sans-serif;
  --f:         "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --max:  1120px;
  --pad:  clamp(1.25rem, 5vw, 3rem);
  --z-dropdown: 10;
  --z-sticky:   30;
  --z-skip:     50;

  /* Browser chrome + Vanta fallbacks (hex for meta tag and WebGL) */
  --theme-color-dark:  #1a1730;
  --theme-color-light: #fbfbfd;
  --vanta-bg-dark:     #1a1730;
  --vanta-bg-light:    #fbfbfd;
  --vanta-fg-dark:     #312e4a;
  --vanta-fg-light:    #b8b0d4;

  color-scheme: light dark;
}

/* Dark semantic set — CSS fallback + Auto+dark OS + explicit Dark */
:root {
  --bg:           oklch(0.13 0.015 275);
  --bg-base:      oklch(0.09 0.009 275);
  --surface:      oklch(0.17 0.018 275);
  --surface-2:    oklch(0.20 0.020 275);
  --border:       oklch(0.24 0.018 275);
  --border-faint: oklch(0.20 0.016 275);
  --ink:          oklch(0.92 0.008 275);
  --ink-2:        oklch(0.74 0.012 275);
  --ink-muted:    oklch(0.58 0.014 275);
  --brand:        var(--p7);
  --brand-deep:   var(--p9);
  --brand-subtle: oklch(0.48 0.14 275 / 0.12);
  --brand-bubble: oklch(0.90 0.11 275);
  --brand-bubble-ink: oklch(0.22 0.025 275);
  --wash-section: oklch(0.15 0.014 275);
  --glow-1:       oklch(0.38 0.20 275 / 0.22);
  --glow-2:       oklch(0.33 0.18 275 / 0.10);
  --mark-studio:  #fff;
  --mark-product: #fff;
  --ink-on-brand: oklch(0.99 0.006 275);
}

/* Auto + light OS (explicit Light on dark OS uses html[data-theme="light"]) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:           oklch(0.99 0.006 275);
    --bg-base:      oklch(0.985 0.008 275);
    --surface:      oklch(0.995 0.005 275);
    --surface-2:    oklch(0.94 0.012 275);
    --border:       oklch(0.86 0.014 275);
    --border-faint: oklch(0.90 0.010 275);
    --ink:          oklch(0.14 0.015 275);
    --ink-2:        oklch(0.38 0.016 275);
    --ink-muted:    oklch(0.48 0.015 275);
    --brand:        oklch(0.33 0.18 275);
    --brand-deep:   oklch(0.22 0.16 275);
    --brand-subtle: oklch(0.33 0.18 275 / 0.10);
    --brand-bubble: oklch(0.90 0.11 275);
    --brand-bubble-ink: oklch(0.22 0.025 275);
    --wash-section: oklch(0.965 0.014 275);
    --glow-1:       oklch(0.55 0.18 275 / 0.28);
    --glow-2:       oklch(0.45 0.16 275 / 0.14);
    --mark-studio:  #25188e;
    --mark-product: var(--brand);
    color-scheme: light;
  }
}

/* Auto + dark OS (explicit Dark on light OS uses html[data-theme="dark"]) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           oklch(0.13 0.015 275);
    --bg-base:      oklch(0.09 0.009 275);
    --surface:      oklch(0.17 0.018 275);
    --surface-2:    oklch(0.20 0.020 275);
    --border:       oklch(0.24 0.018 275);
    --border-faint: oklch(0.20 0.016 275);
    --ink:          oklch(0.92 0.008 275);
    --ink-2:        oklch(0.74 0.012 275);
    --ink-muted:    oklch(0.58 0.014 275);
    --brand:        oklch(0.48 0.140 275);
    --brand-deep:   oklch(0.33 0.180 275);
    --brand-subtle: oklch(0.48 0.14 275 / 0.12);
    --wash-section: oklch(0.15 0.014 275);
    --glow-1:       oklch(0.38 0.20 275 / 0.22);
    --glow-2:       oklch(0.33 0.18 275 / 0.10);
    --mark-studio:  #fff;
    --mark-product: #fff;
    color-scheme: dark;
  }
}

/* Explicit user choice — always wins over Auto media queries */
html[data-theme="light"] {
  --bg:           oklch(0.99 0.006 275);
  --bg-base:      oklch(0.985 0.008 275);
  --surface:      oklch(0.995 0.005 275);
  --surface-2:    oklch(0.94 0.012 275);
  --border:       oklch(0.86 0.014 275);
  --border-faint: oklch(0.90 0.010 275);
  --ink:          oklch(0.14 0.015 275);
  --ink-2:        oklch(0.38 0.016 275);
  --ink-muted:    oklch(0.48 0.015 275);
  --brand:        oklch(0.33 0.18 275);
  --brand-deep:   oklch(0.22 0.16 275);
  --brand-subtle: oklch(0.33 0.18 275 / 0.10);
  --brand-bubble: oklch(0.90 0.11 275);
  --brand-bubble-ink: oklch(0.22 0.025 275);
  --wash-section: oklch(0.965 0.014 275);
  --glow-1:       oklch(0.55 0.18 275 / 0.28);
  --glow-2:       oklch(0.45 0.16 275 / 0.14);
  --mark-studio:  #25188e;
  --mark-product: var(--brand);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:           oklch(0.13 0.015 275);
  --bg-base:      oklch(0.09 0.009 275);
  --surface:      oklch(0.17 0.018 275);
  --surface-2:    oklch(0.20 0.020 275);
  --border:       oklch(0.24 0.018 275);
  --border-faint: oklch(0.20 0.016 275);
  --ink:          oklch(0.92 0.008 275);
  --ink-2:        oklch(0.74 0.012 275);
  --ink-muted:    oklch(0.58 0.014 275);
  --brand:        oklch(0.48 0.140 275);
  --brand-deep:   oklch(0.33 0.180 275);
  --brand-subtle: oklch(0.48 0.14 275 / 0.12);
  --brand-bubble: oklch(0.90 0.11 275);
  --brand-bubble-ink: oklch(0.22 0.025 275);
  --wash-section: oklch(0.15 0.014 275);
  --glow-1:       oklch(0.38 0.20 275 / 0.22);
  --glow-2:       oklch(0.33 0.18 275 / 0.10);
  --mark-studio:  #fff;
  --mark-product: #fff;
  color-scheme: dark;
}