:root {
  /* Primary — deep teal */
  --color-primary:       oklch(44% 0.18 210);
  --color-primary-h:     oklch(38% 0.20 210);
  --color-primary-light: oklch(68% 0.14 210);
  --color-primary-bg:    oklch(44% 0.18 210 / 0.08);
  --color-primary-ring:  oklch(44% 0.18 210 / 0.20);

  /* Accent — warm yellow/orange */
  --color-accent:        oklch(72% 0.20 68);
  --color-accent-h:      oklch(65% 0.22 68);

  /* Neutrals — tinted toward brand hue */
  --color-bg:            oklch(98.5% 0.006 210);
  --color-surface:       oklch(100%   0.003 210);
  --color-surface-2:     oklch(96%    0.007 210);
  --color-border:        oklch(89%    0.010 210);
  --color-text:          oklch(17%    0.014 210);
  --color-text-muted:    oklch(50%    0.010 210);
  --color-text-light:    oklch(68%    0.008 210);

  /* Typography */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 3rem);

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm:  0 1px 3px oklch(17% 0.014 210 / 0.08);
  --shadow:     0 4px 12px oklch(17% 0.014 210 / 0.10);
  --shadow-lg:  0 8px 28px oklch(17% 0.014 210 / 0.14);

  /* Easing */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Z-index */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}