:root {
  color-scheme: light;

  /* Primitive: color */
  --blue-50: #eef5ff;
  --blue-100: #d9e9ff;
  --blue-200: #b8d5ff;
  --blue-300: #86b7ff;
  --blue-400: #4e92ff;
  --blue-500: #2478ff;
  --blue-600: #1769ff;
  --blue-700: #0c52d9;
  --blue-800: #123fa4;
  --blue-900: #15377f;
  --orange-50: #ffefeb;
  --orange-100: #fed7cd;
  --orange-200: #fdae9b;
  --orange-300: #fc7e5f;
  --orange-400: #fb562d;
  --orange-500: #fa4214;
  --orange-600: #fa3f11;
  --orange-700: #d82b00;
  --orange-800: #af2300;
  --orange-900: #911d00;
  --navy-950: #071127;
  --navy-900: #0b1739;
  --slate-950: #111827;
  --slate-800: #263247;
  --slate-700: #374151;
  --slate-600: #4b5563;
  --slate-500: #667085;
  --slate-400: #98a2b3;
  --slate-300: #cbd2dc;
  --slate-200: #e5e7eb;
  --slate-100: #eef2f6;
  --slate-50: #f7f9fc;
  --slate-25: #fbfcfe;
  --slate-350: #cbd5e1;
  --slate-450: #94a3b8;
  --white: #ffffff;
  --white-a88: rgb(255 255 255 / .88);
  --white-a72: rgb(255 255 255 / .72);
  --white-a12: rgb(255 255 255 / .12);
  --green-50: #ecfdf5;
  --green-200: #a7e6cd;
  --green-600: #16855d;
  --green-700: #0f6f4d;
  --amber-50: #fff8e6;
  --amber-200: #f4d58b;
  --amber-300: #fde68a;
  --amber-500: #f59e0b;
  --amber-600: #b45309;
  --amber-900: #4a2c00;
  --red-50: #fff1f2;
  --red-200: #f4bcc0;
  --red-600: #d9343b;
  --red-700: #b4232b;
  --violet-50: #f5f3ff;
  --violet-600: #7047eb;
  --whatsapp-green: #25d366;
  --whatsapp-green-dark: #1ebe5b;
  --blue-600-a14: rgb(23 105 255 / .14);
  --blue-600-a18: rgb(23 105 255 / .18);
  --blue-600-a22: rgb(23 105 255 / .22);
  --orange-600-a14: rgb(250 63 17 / .14);
  --orange-600-a18: rgb(250 63 17 / .18);
  --orange-600-a22: rgb(250 63 17 / .22);
  --navy-950-a58: rgb(7 17 39 / .58);
  --navy-950-a72: rgb(7 17 39 / .72);
  --navy-950-a10: rgb(7 17 39 / .1);

  /* Primitive: typography */
  --font-sans: Inter, Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Primitive: space, radius, shadow */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .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;
  --radius-sm: .75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgb(11 23 57 / .04);
  --shadow-sm: 0 6px 20px rgb(11 23 57 / .06);
  --shadow-md: 0 16px 40px rgb(11 23 57 / .10);
  --shadow-lg: 0 28px 70px rgb(11 23 57 / .16);

  /* Primitive: motion and layering */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 250ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  /* Deliberately far above any third-party widget's internal stacking (e.g. Leaflet panes go
     up to ~700) — the site navigation drawer must always win regardless of what else is on
     the page. */
  --z-drawer: 10000;

  /* Breakpoint contract (media queries use these documented values) */
  --breakpoint-mobile: 30rem;
  --breakpoint-mobile-wide: 40rem;
  --breakpoint-tablet: 48rem;
  --breakpoint-desktop: 64rem;
  --breakpoint-large: 80rem;
  --breakpoint-wide: 90rem;
  --breakpoint-ultrawide: 120rem;

  /* Semantic */
  --color-brand: var(--orange-600);
  --color-brand-hover: var(--orange-700);
  --color-brand-soft: var(--orange-50);
  --color-brand-subtle: var(--orange-100);
  --color-brand-border: var(--orange-200);
  --color-brand-border-hover: var(--orange-300);
  --color-brand-ink: var(--navy-900);
  --color-brand-on-dark: var(--orange-100);
  --color-on-brand: var(--white);
  --color-ink: var(--slate-950);
  --color-ink-strong: var(--navy-900);
  --color-ink-muted: var(--slate-500);
  --color-canvas: var(--slate-50);
  --color-surface: var(--white);
  --color-surface-subtle: var(--slate-25);
  --color-surface-soft: var(--slate-50);
  --color-surface-muted: var(--slate-100);
  --color-placeholder: var(--slate-400);
  --color-control-indicator: var(--slate-500);
  --color-inverse-surface: var(--navy-950);
  --color-inverse-surface-hover: var(--navy-900);
  --color-inverse-text: var(--white);
  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-focus: var(--orange-500);
  --color-success: var(--green-600);
  --color-success-hover: var(--green-700);
  --color-success-soft: var(--green-50);
  --color-warning: var(--amber-600);
  --color-warning-soft: var(--amber-50);
  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-700);
  --color-danger-soft: var(--red-50);
  --color-info: var(--blue-600);
  --color-info-soft: var(--blue-50);
  --color-info-strong: var(--blue-900);
  --color-info-border: var(--blue-200);
  --color-success-border: var(--green-200);
  --color-warning-border: var(--amber-200);
  --color-danger-border: var(--red-200);
  --color-header-glass: var(--white-a88);
  --color-footer-text: var(--slate-350);
  --color-footer-muted: var(--slate-450);
  --color-footer-border: var(--white-a12);
  --color-brand-glow: var(--orange-600-a14);
  --color-brand-shadow: var(--orange-600-a22);
  --color-shimmer: var(--white-a72);
  --status-neutral-surface: var(--color-surface-subtle);
  --status-success-surface: var(--color-success-soft);
  --status-danger-surface: var(--color-danger-soft);
  --color-selection-bg: var(--orange-200);
  --color-selection-fg: var(--navy-950);
  --focus-ring: 0 0 0 3px var(--orange-600-a18);
  --color-overlay: var(--navy-950-a58);
  --radius-interactive: var(--radius-sm);
  --radius-content-card: var(--radius-lg);
  --spacing-content-card: var(--space-6);
  --elevation-content-card: var(--shadow-xs);
  --gradient-page: radial-gradient(circle at 85% 20%, var(--color-brand-glow), transparent 30rem), linear-gradient(180deg, var(--color-surface), var(--color-canvas));
  --gradient-discovery: linear-gradient(180deg, var(--color-brand-soft), transparent);
  --gradient-brand: linear-gradient(145deg, var(--orange-500), var(--orange-700));
  --gradient-cta: linear-gradient(135deg, var(--orange-800), var(--color-brand));
  --gradient-mastery: linear-gradient(135deg, var(--amber-300) 0%, var(--amber-500) 55%, var(--amber-600) 100%);
  --color-mastery-text: var(--amber-900);
  --shadow-mastery: 0 2px 8px color-mix(in srgb, var(--amber-600) 35%, transparent), inset 0 1px 0 var(--white-a72);
  --gradient-founding: linear-gradient(135deg, var(--navy-900) 0%, var(--violet-600) 100%);
  --color-founding-text: var(--white);
  --shadow-founding: 0 2px 8px color-mix(in srgb, var(--navy-900) 35%, transparent), inset 0 1px 0 var(--white-a72);
  --gradient-hero-premium: radial-gradient(circle at 15% -12%, var(--orange-50) 0%, transparent 42%), linear-gradient(180deg, var(--color-surface) 0%, var(--color-canvas) 100%);
  --color-hero-blob-1: color-mix(in srgb, var(--orange-400) 48%, transparent);
  --color-hero-blob-2: color-mix(in srgb, var(--orange-300) 38%, transparent);
  --color-hero-grid-line: color-mix(in srgb, var(--slate-400) 12%, transparent);
  --color-whatsapp: var(--whatsapp-green);
  --color-whatsapp-hover: var(--whatsapp-green-dark);
  --gradient-sponsor-default: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--orange-800) 130%);
  --color-sponsor-overlay: var(--white-a12);
  --color-sponsor-text-muted: var(--white-a72);
  --gradient-sponsor-sunset: linear-gradient(135deg, var(--orange-700) 0%, var(--red-700) 60%, var(--orange-900) 130%);
  --gradient-sponsor-emerald: linear-gradient(135deg, var(--green-700) 0%, var(--navy-950) 130%);
  --gradient-sponsor-violet: linear-gradient(135deg, var(--violet-600) 0%, var(--navy-950) 130%);
  --gradient-sponsor-cloud: linear-gradient(135deg, var(--slate-50) 0%, var(--slate-100) 100%);
  --gradient-sponsor-cream: linear-gradient(135deg, var(--amber-50) 0%, var(--orange-50) 100%);
  --color-sponsor-accent-sunset: var(--amber-300);
  --color-sponsor-accent-emerald: var(--green-200);
  --color-sponsor-accent-violet: var(--violet-50);
  --color-sponsor-accent-cloud: var(--orange-600);
  --color-sponsor-accent-cream: var(--orange-700);
  --color-sponsor-text-on-light: var(--navy-950);
  --color-sponsor-text-muted-on-light: var(--navy-950-a72);
  --color-sponsor-overlay-on-light: var(--navy-950-a10);
  --profile-cover-fallback: linear-gradient(135deg, var(--navy-950), var(--orange-800));
  --profile-cover-overlay: linear-gradient(90deg, color-mix(in srgb, var(--navy-950) 88%, transparent), color-mix(in srgb, var(--orange-800) 56%, transparent));
  --profile-cover-pattern: var(--white-a12);
  --page-gutter: var(--space-4);
  --section-space: var(--space-16);
  --content-max: 80rem;
  --content-wide-max: 96rem;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);

  /* Component */
  --control-height-sm: 2.5rem;
  --control-height: 2.875rem;
  --control-height-lg: 3.25rem;
  --control-radius: var(--radius-interactive);
  --control-border: var(--color-border);
  --control-ring: var(--focus-ring);
  --button-bg: var(--color-brand);
  --button-fg: var(--color-on-brand);
  --button-bg-hover: var(--color-brand-hover);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-content-card);
  --card-padding: var(--spacing-content-card);
  --card-shadow: var(--elevation-content-card);
  --header-height: 5rem;
  --bottom-nav-height: 4.25rem;
  --scrim: var(--color-overlay);
}

@media (min-width: 48rem) {
  :root {
    --page-gutter: var(--space-8);
    --section-space: var(--space-20);
  }
}

@media (min-width: 90rem) {
  :root { --page-gutter: var(--space-12); }
}