/* ═══════════════════════════════════════════════════════════════
   ProductQuant MVP Build v2 — Design Tokens
   Hallmark Theme: Studio · Macrostructure: Bento Grid
   All colors in OKLCH for perceptual consistency
   4pt spacing scale applied throughout
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette (OKLCH) ── */
  --color-bg:              oklch(0.985 0.004 75);
  --color-bg-alt:          oklch(0.975 0.006 75);
  --color-surface:         oklch(0.998 0.002 75);
  --color-surface-muted:   oklch(0.96 0.006 75);
  --color-border:          oklch(0.91 0.008 75);
  --color-border-strong:   oklch(0.82 0.015 75);

  --color-text:            oklch(0.14 0.02 260);
  --color-text-muted:      oklch(0.48 0.025 260);
  --color-text-faint:      oklch(0.64 0.02 260);

  --color-accent:          oklch(0.52 0.19 255);
  --color-accent-hover:    oklch(0.47 0.19 255);
  --color-accent-active:   oklch(0.42 0.19 255);
  --color-accent-subtle:   oklch(0.92 0.05 255);
  --color-accent-glow:     oklch(0.65 0.18 255 / 0.15);

  --color-dark:            oklch(0.13 0.025 260);
  --color-dark-surface:    oklch(0.17 0.02 260);
  --color-dark-border:     oklch(0.22 0.02 260);
  --color-on-dark:         oklch(0.96 0.006 260);
  --color-on-dark-muted:   oklch(0.72 0.02 260);
  --color-on-dark-faint:   oklch(0.54 0.025 260);

  --color-green:           oklch(0.58 0.14 155);
  --color-green-subtle:    oklch(0.93 0.04 155);
  --color-green-text:      oklch(0.35 0.08 155);

  --color-warm:            oklch(0.55 0.12 45);
  --color-warm-subtle:     oklch(0.94 0.03 45);

  /* ── Typography ── */
  --font-display:  'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-label:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Font Sizes ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  2.75rem;    /* 44px */
  --text-6xl:  3.5rem;     /* 56px */

  /* ── Line Heights ── */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ── Spacing (4pt scale) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ── Border Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Elevation / Shadows ── */
  --shadow-sm:   0 1px 2px oklch(0 0 0 / 0.04), 0 1px 4px oklch(0 0 0 / 0.06);
  --shadow-md:   0 2px 4px oklch(0 0 0 / 0.05), 0 8px 16px oklch(0 0 0 / 0.08);
  --shadow-lg:   0 4px 12px oklch(0 0 0 / 0.06), 0 16px 32px oklch(0 0 0 / 0.08);
  --shadow-xl:   0 8px 24px oklch(0 0 0 / 0.08), 0 32px 48px oklch(0 0 0 / 0.1);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  /* ── Animation ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 0.68, 0.06);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* ── Layout ── */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --section-padding: var(--space-40);
  --section-padding-mobile: var(--space-20);
  --nav-height: 64px;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-out:     ease;
    --ease-in:      ease;
    --ease-in-out:  ease;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}