:root {
  /* ── Colors (OKLCH) ── */
  --clr-bg:          oklch(0.985 0.004 204);
  --clr-bg-alt:      oklch(0.965 0.008 204);
  --clr-surface:     oklch(1 0 0);
  --clr-dark:        oklch(0.14 0.028 241);
  --clr-dark-2:      oklch(0.09 0.020 241);

  --clr-primary:     oklch(0.58 0.14 202);
  --clr-primary-d:   oklch(0.49 0.13 202);
  --clr-primary-l:   oklch(0.87 0.07 202);
  --clr-primary-ll:  oklch(0.96 0.03 202);

  --clr-accent:      oklch(0.70 0.15 58);
  --clr-accent-l:    oklch(0.96 0.05 58);

  --clr-text:        oklch(0.17 0.022 241);
  --clr-muted:       oklch(0.50 0.018 220);
  --clr-border:      oklch(0.89 0.010 204);
  --clr-border-l:    oklch(0.94 0.006 204);

  /* ── Typography ── */
  --fn-display: 'Barlow Condensed', system-ui, sans-serif;
  --fn-body:    'Mulish', system-ui, sans-serif;

  /* ── Spacing (4pt scale) ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 100px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 4px rgba(22,28,45, 0.05);
  --shadow-sm: 0 4px 16px rgba(22,28,45, 0.07);
  --shadow-md: 0 8px 28px rgba(22,28,45, 0.09);
  --shadow-lg: 0 20px 48px rgba(8,145,178, 0.14), 0 6px 16px rgba(22,28,45, 0.07);
  --shadow-primary: 0 8px 24px rgba(8,145,178, 0.32);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   0.16s cubic-bezier(0.16, 1, 0.3, 1);
  --t-base:   0.26s cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow:   0.42s cubic-bezier(0.16, 1, 0.3, 1);
}