:root {
  color-scheme: light;

  /* Typography */
  --font-family-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, Monaco, Consolas, "Liberation Mono", monospace;

  --font-size-100: 0.75rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.125rem;
  --font-size-500: 1.25rem;
  --font-size-600: 1.5rem;
  --font-size-700: 1.875rem;
  --font-size-800: 2.25rem;
  --font-size-900: 3rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* Spacing */
  --space-0: 0;
  --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-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --breakpoint-xs: 30rem;
  --breakpoint-sm: 48rem;
  --breakpoint-md: 64rem;
  --breakpoint-lg: 80rem;
  --breakpoint-xl: 100rem;

  --viewport-padding-sm: var(--space-4);
  --viewport-padding-md: var(--space-6);
  --viewport-padding-lg: var(--space-8);

  --width-prose: 40rem;
  --width-narrow: 48rem;
  --width-content: 64rem;
  --width-wide: 80rem;
  --width-max: 90rem;

  --content-width-xs: 36rem;
  --content-width-sm: 48rem;
  --content-width-md: 64rem;
  --content-width-lg: 72rem;
  --content-width-xl: 84rem;

  /* Radius */
  --radius-0: 0;
  --radius-1: 0.5rem;
  --radius-2: 0.75rem;
  --radius-3: 1rem;
  --radius-4: 1.25rem;
  --radius-5: 1.5rem;
  --radius-6: 1.75rem;
  --radius-round: 9999px;

  /* Borders */
  --border-width-hairline: 0.5px;
  --border-width-thin: 1px;
  --border-width-thick: 1.5px;

  /* Light Apple-like palette */
  --color-white: rgb(255 255 255);
  --color-black: rgb(0 0 0);

  --color-gray-50: rgb(251 251 253);
  --color-gray-100: rgb(245 245 247);
  --color-gray-200: rgb(232 232 237);
  --color-gray-300: rgb(210 210 215);
  --color-gray-400: rgb(134 134 139);
  --color-gray-500: rgb(110 110 115);
  --color-gray-600: rgb(81 81 84);
  --color-gray-700: rgb(66 66 69);
  --color-gray-800: rgb(29 29 31);
  --color-gray-900: rgb(22 22 23);

  --color-blue-100: rgb(214 236 255);
  --color-blue-200: rgb(162 210 255);
  --color-blue-300: rgb(96 170 255);
  --color-blue-400: rgb(41 151 255);
  --color-blue-500: rgb(0 113 227);
  --color-blue-600: rgb(0 90 181);

  --color-green-500: rgb(52 199 89);
  --color-orange-500: rgb(255 159 10);
  --color-red-500: rgb(255 59 48);

  /* Semantic text */
  --color-text-strong: var(--color-gray-900);
  --color-text-primary: var(--color-gray-800);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-quaternary: var(--color-gray-400);
  --color-text-inverse: var(--color-white);
  --color-text-accent: var(--color-blue-500);

  /* Semantic backgrounds */
  --color-bg-canvas: var(--color-white);
  --color-bg-page: var(--color-gray-50);
  --color-bg-subtle: var(--color-gray-100);
  --color-bg-muted: var(--color-gray-200);
  --color-bg-inverse: var(--color-gray-900);
  --color-bg-accent: var(--color-blue-500);

  /* Surface fills */
  --fill-primary: rgb(255 255 255 / 0.8);
  --fill-secondary: rgb(255 255 255 / 0.64);
  --fill-tertiary: rgb(245 245 247 / 0.8);
  --fill-quaternary: rgb(232 232 237 / 0.72);
  --fill-elevated: rgb(255 255 255 / 0.92);
  --fill-glass-light: rgb(255 255 255 / 0.6);
  --fill-glass-strong: rgb(255 255 255 / 0.78);
  --fill-accent-soft: rgb(0 113 227 / 0.1);
  --fill-accent-medium: rgb(0 113 227 / 0.16);

  /* Borders */
  --color-border-subtle: rgb(0 0 0 / 0.06);
  --color-border-soft: rgb(0 0 0 / 0.08);
  --color-border-default: rgb(0 0 0 / 0.12);
  --color-border-strong: rgb(0 0 0 / 0.18);
  --color-border-accent: rgb(0 113 227 / 0.24);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-sm: 0 4px 12px rgb(0 0 0 / 0.06);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.14);
  --shadow-focus: 0 0 0 4px rgb(0 113 227 / 0.18);

  /* Blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;

  --ease-standard: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Component sizing */
  --control-height-sm: 2rem;
  --control-height-md: 2.5rem;
  --control-height-lg: 3rem;

  --nav-height: 3.5rem;
  --header-height: 4rem;
}