:root {
  /* Font families */
  --font-family-sans: "SF Pro Display", "Inter", system-ui, sans-serif;

  /* Modular 18-step scale */
  --size-1: 0.03125rem;    --size-2: 0.046875rem;  --size-3: 0.0625rem;   --size-4: 0.09375rem;
  --size-5: 0.125rem;      --size-6: 0.1875rem;    --size-7: 0.25rem;     --size-8: 0.375rem;
  --size-9: 0.5rem;        --size-10: 0.75rem;     --size-11: 1rem;       --size-12: 1.5rem;
  --size-13: 2rem;         --size-14: 3rem;        --size-15: 4rem;       --size-16: 6rem;
  --size-17: 8rem;         --size-18: 12rem;

  /* Border, radius, icon, space aliases */
  --border-100: var(--size-1);   --border-200: var(--size-3);   --border-300: var(--size-4);   --border-400: var(--size-5);
  --radius-100: var(--size-3);   --radius-200: var(--size-5);   --radius-300: var(--size-7);   --radius-400: var(--size-10);
  --icon-100: var(--size-10);     --icon-200: var(--size-11);     --icon-300: var(--size-12);    --icon-400: var(--size-13);
  --space-100: var(--size-5);    --space-200: var(--size-7);    --space-300: var(--size-9);    --space-400: var(--size-11);

  /* Font tokens (navigation, body, card) */
  --nav-font-1-family: var(--font-family-sans); --nav-font-1-size: var(--size-12); --nav-font-1-weight: 200;
  --nav-font-2-family: var(--font-family-sans); --nav-font-2-size: var(--size-11);  --nav-font-2-weight: 400;
  --nav-font-3-family: var(--font-family-sans); --nav-font-3-size: var(--size-11);  --nav-font-3-weight: 300;
  --nav-font-4-family: var(--font-family-sans); --nav-font-4-size: var(--size-10);  --nav-font-4-weight: 300;

  --body-font-1-family: var(--font-family-sans); --body-font-1-size: var(--size-12); --body-font-1-weight: 300;
  --body-font-2-family: var(--font-family-sans); --body-font-2-size: var(--size-11); --body-font-2-weight: 500;
  --body-font-3-family: var(--font-family-sans); --body-font-3-size: var(--size-11); --body-font-3-weight: 300;
  --body-font-4-family: var(--font-family-sans); --body-font-4-size: var(--size-10);  --body-font-4-weight: 400;

  --card-font-1-family: var(--font-family-sans); --card-font-1-size: var(--size-13); --card-font-1-weight: 100;
  --card-font-2-family: var(--font-family-sans); --card-font-2-size: var(--size-12); --card-font-2-weight: 200;
  --card-font-3-family: var(--font-family-sans); --card-font-3-size: var(--size-11); --card-font-3-weight: 300;
  --card-font-4-family: var(--font-family-sans); --card-font-4-size: var(--size-10);  --card-font-4-weight: 300;

  /* Primary, base, accent-1, accent-2, accent-3, accent-4 as above! */
  /* ... (include your full palette here, omitted for brevity) ... */

  /* Timing, opacity, focus, easing, breakpoints as before */
  --timing-100: 80ms;    --timing-200: 150ms;   --timing-300: 300ms;   --timing-400: 600ms;
  --opacity-100: 0.08;   --opacity-200: 0.38;   --opacity-300: 0.6;    --opacity-400: 0.85;
  --focus-color: var(--primary-400);  --focus-width: 2px;  --focus-style: solid;  --focus-offset: 2px;
  --easing-standard: cubic-bezier(.4,0,.2,1);
  --breakpoint-xs: 480px;  --breakpoint-sm: 768px;  --breakpoint-md: 1024px;  --breakpoint-lg: 1440px;  --breakpoint-xl: 1920px;

 /* ---------- PRIMARY, BASE, ACCENT COLOR PALETTES ---------- */

  /* Primary (Blue) */
  --primary-100: hsl(220, 100%, 98%);
  --primary-200: hsl(220, 95%, 92%);
  --primary-300: hsl(220, 90%, 86%);
  --primary-400: hsl(220, 85%, 75%);
  --primary-500: hsl(220, 75%, 62%);
  --primary-600: hsl(220, 80%, 54%);
  --primary-700: hsl(220, 85%, 44%);
  --primary-800: hsl(220, 90%, 30%);
  --primary-900: hsl(220, 90%, 16%);

  /* Base (Gray/Neutral) */
  --base-100: hsl(216, 33%, 97%);
  --base-200: hsl(214, 15%, 92%);
  --base-300: hsl(210, 16%, 82%);
  --base-400: hsl(211, 13%, 65%);
  --base-500: hsl(211, 10%, 53%);
  --base-600: hsl(211, 12%, 43%);
  --base-700: hsl(210, 15%, 32%);
  --base-800: hsl(210, 20%, 20%);
  --base-900: hsl(210, 30%, 10%);

  /* Accent-1 (Gold) */
  --accent-1-100: hsl(43, 100%, 96%);
  --accent-1-200: hsl(43, 95%, 92%);
  --accent-1-300: hsl(43, 90%, 86%);
  --accent-1-400: hsl(43, 90%, 70%);
  --accent-1-500: hsl(43, 95%, 60%);
  --accent-1-600: hsl(43, 98%, 52%);
  --accent-1-700: hsl(43, 98%, 44%);
  --accent-1-800: hsl(43, 98%, 32%);
  --accent-1-900: hsl(43, 98%, 20%);

  /* Accent-2 (Teal/Green-Blue, modern calm) */
  --accent-2-100: hsl(178, 60%, 94%);
  --accent-2-200: hsl(178, 55%, 87%);
  --accent-2-300: hsl(178, 50%, 76%);
  --accent-2-400: hsl(178, 50%, 62%);
  --accent-2-500: hsl(178, 60%, 50%);
  --accent-2-600: hsl(178, 70%, 44%);
  --accent-2-700: hsl(178, 80%, 36%);
  --accent-2-800: hsl(178, 90%, 26%);
  --accent-2-900: hsl(178, 100%, 17%);

  /* Accent-3 (Soft Purple) */
  --accent-3-100: hsl(263, 80%, 97%);
  --accent-3-200: hsl(263, 75%, 92%);
  --accent-3-300: hsl(263, 70%, 85%);
  --accent-3-400: hsl(263, 70%, 72%);
  --accent-3-500: hsl(263, 70%, 60%);
  --accent-3-600: hsl(263, 70%, 50%);
  --accent-3-700: hsl(263, 70%, 40%);
  --accent-3-800: hsl(263, 70%, 30%);
  --accent-3-900: hsl(263, 70%, 20%);

  /* Accent-4 (Watermelon/Cool Pink) */
  --accent-4-100: hsl(340, 80%, 97%);
  --accent-4-200: hsl(340, 75%, 91%);
  --accent-4-300: hsl(340, 70%, 85%);
  --accent-4-400: hsl(340, 70%, 70%);
  --accent-4-500: hsl(340, 70%, 60%);
  --accent-4-600: hsl(340, 70%, 50%);
  --accent-4-700: hsl(340, 70%, 40%);
  --accent-4-800: hsl(340, 70%, 28%);
  --accent-4-900: hsl(340, 70%, 15%);

}