/* ════════════════════════════════════════════════════════════
   Design System — OKLCH Tokens & Fluid Typography
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Colors (OKLCH) ── */
  /* Brand Hue: 260 (Deep Blue/Navy) */
  --hue: 260;
  
  /* Neutrals - Tinted toward brand hue */
  --bg:      oklch(98% 0.008 var(--hue));   /* More subtle creamy background */
  --bg-soft: oklch(95% 0.015 var(--hue));
  --surface: oklch(100% 0 var(--hue));     
  
  --text:       oklch(22% 0.02 var(--hue)); /* Softer dark text */
  --text-soft:  oklch(48% 0.03 var(--hue));
  --text-muted: oklch(68% 0.02 var(--hue));
  
  /* Accents - Reduced chroma for sophistication */
  --accent:       oklch(62% 0.14 var(--hue)); /* Sophisticated Slate Blue */
  --accent-soft:  oklch(92% 0.06 var(--hue));
  --accent-dark:  oklch(45% 0.12 var(--hue));
  
  --secondary:    oklch(68% 0.12 160);       /* Muted Mint */
  
  /* Deep Accents - Slightly more muted navy */
  --navy:         oklch(16% 0.04 var(--hue));
  --navy-light:   oklch(22% 0.06 var(--hue));
  
  /* Semantic Borders - Even more subtle */
  --border:       oklch(0% 0 0% / 6%);
  --border-deep:  oklch(0% 0 0% / 12%);
  --white: oklch(100% 0 0);
  --bg-alpha: color-mix(in oklab, var(--bg) 86%, transparent);
  --navy-soft: oklch(28% 0.05 var(--hue));
  --z-fixed: 1000;

  /* ── Typography (Fluid Scale) ── */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-serif:   "Baskervville", serif;
  --font-mono:    "JetBrains Mono", monospace;

  /* Modular Scale (1.25 ratio) via clamp */
  --step--2: clamp(0.64rem, 0.61rem + 0.15vw, 0.72rem);
  --step--1: clamp(0.80rem, 0.76rem + 0.20vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.19rem + 0.31vw, 1.41rem);
  --step-2:  clamp(1.56rem, 1.48rem + 0.39vw, 1.76rem);
  --step-3:  clamp(1.95rem, 1.85rem + 0.49vw, 2.20rem);
  --step-4:  clamp(2.44rem, 2.32rem + 0.61vw, 2.75rem);
  --step-5:  clamp(3.05rem, 2.90rem + 0.76vw, 3.44rem);
  --step-6:  clamp(3.81rem, 3.63rem + 0.95vw, 4.30rem);
  --step-7:  clamp(4.77rem, 4.54rem + 1.19vw, 5.37rem);

  /* ── Spacing (Flexible) ── */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.13vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.45rem + 0.25vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.38vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.90rem + 0.50vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.35rem + 0.75vw, 1.88rem);
  --space-l:   clamp(2.00rem, 1.80rem + 1.00vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.70rem + 1.50vw, 3.75rem);
  --space-2xl: clamp(4.00rem, 3.60rem + 2.00vw, 5.00rem);
  --space-3xl: clamp(6.00rem, 5.40rem + 3.00vw, 7.50rem);

  /* ── Easing ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Typography Tokens ── */
  --tracking-display: -0.015em;
  --tracking-label:   0.12em;
  --tracking-tight:   -0.03em;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:      oklch(14% 0.02 var(--hue));
  --bg-soft: oklch(18% 0.02 var(--hue));
  --surface: oklch(22% 0.02 var(--hue));

  --text:       oklch(95% 0.01 var(--hue));
  --text-soft:  oklch(84% 0.02 var(--hue));
  --text-muted: oklch(71% 0.02 var(--hue));

  --accent:      oklch(72% 0.14 var(--hue));
  --accent-soft: oklch(30% 0.05 var(--hue));
  --accent-dark: oklch(82% 0.08 var(--hue));

  --secondary:   oklch(78% 0.12 160);

  --navy:       oklch(94% 0.01 var(--hue));
  --navy-light: oklch(88% 0.02 var(--hue));
  --navy-soft:  oklch(100% 0 0 / 82%);

  --border:      oklch(100% 0 0 / 12%);
  --border-deep: oklch(100% 0 0 / 22%);
  --bg-alpha: color-mix(in oklab, var(--bg) 86%, transparent);
  color-scheme: dark;
}

/* ── Typography Roles ── */
.text-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 100;
  letter-spacing: var(--tracking-display);
}

.text-body {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 16;
}

.text-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}