/* ═══════════════════════════════════════════════════
   Design Tokens — OKLCH + Dark/Light Mode
   Portfolio v3 · 2026
   ═══════════════════════════════════════════════════ */

/* ── Fonts (swap to prevent FOIT) ── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

:root {
  /* ═══ Palette: OKLCH base colors ═══ */
  --palette-rust:       oklch(62% 0.18 35);
  --palette-rust-deep:  oklch(52% 0.17 30);
  --palette-beige:      oklch(76% 0.08 70);
  --palette-cream:      oklch(95% 0.02 85);
  --palette-ink:        oklch(15% 0.03 55);

  /* ═══ Semantic: surfaces (dark mode default) ═══ */
  --surface-base:       oklch(8% 0.02 50);
  --surface-raised:     oklch(10% 0.025 50);
  --surface-overlay:    oklch(6% 0.02 50 / 0.82);
  --surface-statement:  oklch(6% 0.015 50);
  --surface-experience: oklch(5% 0.015 50);
  --surface-footer:     var(--palette-cream);

  /* ═══ Semantic: text ═══ */
  --text-primary:       oklch(95% 0.02 85 / 0.96);
  --text-secondary:     oklch(95% 0.02 85 / 0.72);
  --text-muted:         oklch(95% 0.02 85 / 0.55);
  --text-faint:         oklch(95% 0.02 85 / 0.35);

  /* ═══ Semantic: accent ═══ */
  --accent:             var(--palette-rust);
  --accent-hover:       color-mix(in oklch, var(--palette-rust) 82%, white);
  --accent-subtle:      color-mix(in oklch, var(--palette-rust) 15%, var(--surface-base));
  --accent-glow:        oklch(62% 0.18 35 / 0.45);

  /* ═══ Semantic: borders ═══ */
  --border-light:       oklch(95% 0.02 85 / 0.1);
  --border-faint:       oklch(95% 0.02 85 / 0.05);

  /* ═══ Footer ink tokens (inverted section) ═══ */
  --ink-primary:        oklch(15% 0.03 55 / 0.94);
  --ink-body:           oklch(15% 0.03 55 / 0.78);
  --ink-muted:          oklch(15% 0.03 55 / 0.52);
  --ink-faint:          oklch(15% 0.03 55 / 0.22);

  /* ═══ Typography ═══ */
  --font-display:       'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:          'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:          'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* ═══ Type Scale ═══ */
  --text-xs:   0.7rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.8rem;

  /* ═══ Spacing ═══ */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 8rem;

  /* ═══ Radii ═══ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-full: 50%;

  /* ═══ Shadows ═══ */
  --shadow-sm:    0 4px 12px oklch(0% 0 0 / 0.35);
  --shadow-md:    0 8px 32px oklch(0% 0 0 / 0.45);
  --shadow-lg:    0 20px 50px oklch(0% 0 0 / 0.55);
  --glow-primary: 0 0 40px oklch(62% 0.18 35 / 0.45);
  --glow-accent:  0 0 28px oklch(76% 0.08 70 / 0.35);

  /* ═══ Transitions ═══ */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring:  cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast:       0.15s ease;
  --t-base:       0.3s ease;
  --t-slow:       0.6s var(--ease-out);

  /* ═══ Z-Index ═══ */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-fixed:    1000;
  --z-modal:    2000;
  --z-tooltip:  9000;
  --z-top:      9999;

  /* ═══ Focus ring ═══ */
  --focus-ring:  0 0 0 3px oklch(62% 0.18 35 / 0.5);

  /* ═══ Card glass surface ═══ */
  --glass-bg:         oklch(18% 0.02 50 / 0.5);
  --glass-bg-hover:   oklch(22% 0.025 50 / 0.55);
  --glass-highlight:  oklch(95% 0.02 85 / 0.08);
  --glass-edge:       oklch(95% 0.02 85 / 0.14);
  --glass-edge-hover: oklch(95% 0.02 85 / 0.2);
  --glass-shadow:     oklch(0% 0 0 / 0.25);
  --glass-shadow-lg:  oklch(0% 0 0 / 0.35);

  /* ═══ Theme indicator ═══ */
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════
   Light Mode
   ═══════════════════════════════════════════════════ */

/* Manual toggle (dark is the default; light only applies when explicitly set) */
[data-theme="light"] {
  --surface-base:       oklch(96% 0.01 85);
  --surface-raised:     oklch(98% 0.008 85);
  --surface-overlay:    oklch(97% 0.01 85 / 0.85);
  --surface-statement:  oklch(94% 0.012 85);
  --surface-experience: oklch(95% 0.01 85);
  --surface-footer:     oklch(15% 0.03 55);

  --text-primary:       oklch(15% 0.03 55 / 0.94);
  --text-secondary:     oklch(15% 0.03 55 / 0.72);
  --text-muted:         oklch(15% 0.03 55 / 0.48);
  --text-faint:         oklch(15% 0.03 55 / 0.28);

  --accent:             var(--palette-rust-deep);
  --accent-hover:       color-mix(in oklch, var(--palette-rust-deep) 82%, black);
  --accent-subtle:      color-mix(in oklch, var(--palette-rust) 10%, var(--surface-base));

  --border-light:       oklch(15% 0.03 55 / 0.1);
  --border-faint:       oklch(15% 0.03 55 / 0.05);

  --ink-primary:        oklch(95% 0.02 85 / 0.96);
  --ink-body:           oklch(95% 0.02 85 / 0.78);
  --ink-muted:          oklch(95% 0.02 85 / 0.55);
  --ink-faint:          oklch(95% 0.02 85 / 0.22);

  --shadow-sm:    0 4px 12px oklch(0% 0 0 / 0.08);
  --shadow-md:    0 8px 32px oklch(0% 0 0 / 0.12);
  --shadow-lg:    0 20px 50px oklch(0% 0 0 / 0.16);

  --glass-bg:         oklch(100% 0 0 / 0.55);
  --glass-bg-hover:   oklch(100% 0 0 / 0.65);
  --glass-highlight:  oklch(100% 0 0 / 0.4);
  --glass-edge:       oklch(0% 0 0 / 0.06);
  --glass-edge-hover: oklch(0% 0 0 / 0.1);
  --glass-shadow:     oklch(0% 0 0 / 0.06);
  --glass-shadow-lg:  oklch(0% 0 0 / 0.1);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════
   Accessibility: High Contrast
   ═══════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
  :root {
    --text-primary:   oklch(100% 0 0);
    --text-secondary: oklch(90% 0.01 85);
    --text-muted:     oklch(80% 0.01 85);
    --border-light:   oklch(95% 0.02 85 / 0.3);
    --border-faint:   oklch(95% 0.02 85 / 0.15);
  }
}

/* ═══════════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0.01ms;
    --t-base:  0.01ms;
    --t-slow:  0.01ms;
  }
}