/* Design Tokens - Auto-generated */
/* Do not edit directly - modify design-system/tokens.json and run design-system/build-tokens.py */

/* === PRIMITIVES === */
:root {
  --primitive-color-white: #FFFFFF;
  --primitive-color-success-600: #2F6F4E;
  --primitive-color-alpha-white-72: rgba(255, 255, 255, 0.72);
  --primitive-color-alpha-white-94: rgba(255, 255, 255, 0.94);
  --primitive-color-alpha-ink-6: rgba(16, 24, 20, 0.06);
  --primitive-color-meadow-brand-50: #E7FEEB;
  --primitive-color-meadow-brand-100: #D1F9D8;
  --primitive-color-meadow-brand-200: #ADEFBA;
  --primitive-color-meadow-brand-300: #7FDD94;
  --primitive-color-meadow-brand-400: #51C672;
  --primitive-color-meadow-brand-500: #30AB59;
  --primitive-color-meadow-brand-600: #0D8D41;
  --primitive-color-meadow-brand-700: #007131;
  --primitive-color-meadow-brand-800: #005724;
  --primitive-color-meadow-brand-900: #003F18;
  --primitive-color-meadow-pop-100: #FFEBC1;
  --primitive-color-meadow-pop-200: #FDD789;
  --primitive-color-meadow-pop-400: #D6A200;
  --primitive-color-meadow-pop-500: #B68900;
  --primitive-color-meadow-pop-600: #956F00;
  --primitive-color-meadow-pop-700: #775800;
  --primitive-color-meadow-pop-800: #5C4300;
  --primitive-color-meadow-neutral-50: #F9FBF9;
  --primitive-color-meadow-neutral-100: #F0F4F0;
  --primitive-color-meadow-neutral-200: #E0E6E1;
  --primitive-color-meadow-neutral-300: #CCD3CD;
  --primitive-color-meadow-neutral-400: #9FA7A0;
  --primitive-color-meadow-neutral-500: #7B837C;
  --primitive-color-meadow-neutral-600: #5E665F;
  --primitive-color-meadow-neutral-700: #484F49;
  --primitive-color-meadow-neutral-800: #313732;
  --primitive-color-meadow-neutral-900: #1E231F;
  --primitive-color-meadow-neutral-950: #101511;
  --primitive-color-sky-brand-50: #F2F7FF;
  --primitive-color-sky-brand-100: #E2EEFF;
  --primitive-color-sky-brand-200: #C7DEFF;
  --primitive-color-sky-brand-300: #9FC7FF;
  --primitive-color-sky-brand-400: #71ACFF;
  --primitive-color-sky-brand-500: #4590F6;
  --primitive-color-sky-brand-600: #2D74D2;
  --primitive-color-sky-brand-700: #1D5BAD;
  --primitive-color-sky-brand-800: #154686;
  --primitive-color-sky-brand-900: #0E3261;
  --primitive-color-sky-pop-100: #CDF8E9;
  --primitive-color-sky-pop-200: #A5EED6;
  --primitive-color-sky-pop-400: #35C5A1;
  --primitive-color-sky-pop-500: #00A988;
  --primitive-color-sky-pop-600: #008A6E;
  --primitive-color-sky-pop-700: #006E57;
  --primitive-color-sky-pop-800: #005543;
  --primitive-color-sky-neutral-50: #F8FBFD;
  --primitive-color-sky-neutral-100: #EFF3F7;
  --primitive-color-sky-neutral-200: #E0E4EA;
  --primitive-color-sky-neutral-300: #CCD2D8;
  --primitive-color-sky-neutral-400: #9FA5AD;
  --primitive-color-sky-neutral-500: #7A8188;
  --primitive-color-sky-neutral-600: #5D646B;
  --primitive-color-sky-neutral-700: #474E55;
  --primitive-color-sky-neutral-800: #30363C;
  --primitive-color-sky-neutral-900: #1D2227;
  --primitive-color-sky-neutral-950: #101419;
  --primitive-color-lagoon-brand-50: #E3FDFC;
  --primitive-color-lagoon-brand-100: #CBF7F6;
  --primitive-color-lagoon-brand-200: #A1ECEC;
  --primitive-color-lagoon-brand-300: #69D9D8;
  --primitive-color-lagoon-brand-400: #25C2C2;
  --primitive-color-lagoon-brand-500: #00A5A6;
  --primitive-color-lagoon-brand-600: #008787;
  --primitive-color-lagoon-brand-700: #006C6C;
  --primitive-color-lagoon-brand-800: #005353;
  --primitive-color-lagoon-brand-900: #003B3B;
  --primitive-color-lagoon-pop-100: #E2F6C1;
  --primitive-color-lagoon-pop-200: #CAEA93;
  --primitive-color-lagoon-pop-400: #90BD00;
  --primitive-color-lagoon-pop-500: #7AA100;
  --primitive-color-lagoon-pop-600: #638300;
  --primitive-color-lagoon-pop-700: #4E6800;
  --primitive-color-lagoon-pop-800: #3B5000;
  --primitive-color-lagoon-neutral-50: #F7FBFB;
  --primitive-color-lagoon-neutral-100: #EEF4F4;
  --primitive-color-lagoon-neutral-200: #DDE6E6;
  --primitive-color-lagoon-neutral-300: #C9D3D3;
  --primitive-color-lagoon-neutral-400: #9CA7A7;
  --primitive-color-lagoon-neutral-500: #778383;
  --primitive-color-lagoon-neutral-600: #5A6666;
  --primitive-color-lagoon-neutral-700: #45504F;
  --primitive-color-lagoon-neutral-800: #2E3837;
  --primitive-color-lagoon-neutral-900: #1B2323;
  --primitive-color-lagoon-neutral-950: #0E1515;
  --primitive-color-sunshine-brand-50: #FFF7DD;
  --primitive-color-sunshine-brand-100: #FDECB9;
  --primitive-color-sunshine-brand-200: #F7DA83;
  --primitive-color-sunshine-brand-300: #E8C035;
  --primitive-color-sunshine-brand-400: #CDA600;
  --primitive-color-sunshine-brand-500: #AE8D00;
  --primitive-color-sunshine-brand-600: #8E7300;
  --primitive-color-sunshine-brand-700: #725B00;
  --primitive-color-sunshine-brand-800: #584600;
  --primitive-color-sunshine-brand-900: #3F3100;
  --primitive-color-sunshine-pop-100: #E4EDFF;
  --primitive-color-sunshine-pop-200: #CCDDFF;
  --primitive-color-sunshine-pop-400: #7FA9FF;
  --primitive-color-sunshine-pop-500: #558AFF;
  --primitive-color-sunshine-pop-600: #3D6DDE;
  --primitive-color-sunshine-pop-700: #2C56B7;
  --primitive-color-sunshine-pop-800: #21428E;
  --primitive-color-sunshine-neutral-50: #FCFAF7;
  --primitive-color-sunshine-neutral-100: #F5F2EE;
  --primitive-color-sunshine-neutral-200: #E7E4DD;
  --primitive-color-sunshine-neutral-300: #D4D1C9;
  --primitive-color-sunshine-neutral-400: #A8A49C;
  --primitive-color-sunshine-neutral-500: #848077;
  --primitive-color-sunshine-neutral-600: #67635A;
  --primitive-color-sunshine-neutral-700: #514D45;
  --primitive-color-sunshine-neutral-800: #38352E;
  --primitive-color-sunshine-neutral-900: #24211B;
  --primitive-color-sunshine-neutral-950: #16130E;
  --primitive-color-lavender-brand-50: #F6F6FF;
  --primitive-color-lavender-brand-100: #EAEBFF;
  --primitive-color-lavender-brand-200: #D8D8FF;
  --primitive-color-lavender-brand-300: #BDBCFF;
  --primitive-color-lavender-brand-400: #A29DFF;
  --primitive-color-lavender-brand-500: #887DF3;
  --primitive-color-lavender-brand-600: #6F63CF;
  --primitive-color-lavender-brand-700: #584DAA;
  --primitive-color-lavender-brand-800: #433A84;
  --primitive-color-lavender-brand-900: #2F2960;
  --primitive-color-lavender-pop-100: #F2F0C1;
  --primitive-color-lavender-pop-200: #E6E192;
  --primitive-color-lavender-pop-400: #BAAF00;
  --primitive-color-lavender-pop-500: #9E9400;
  --primitive-color-lavender-pop-600: #817900;
  --primitive-color-lavender-pop-700: #676000;
  --primitive-color-lavender-pop-800: #4F4A00;
  --primitive-color-lavender-neutral-50: #FAFAFD;
  --primitive-color-lavender-neutral-100: #F2F2F7;
  --primitive-color-lavender-neutral-200: #E3E3EA;
  --primitive-color-lavender-neutral-300: #D0D0D8;
  --primitive-color-lavender-neutral-400: #A3A4AD;
  --primitive-color-lavender-neutral-500: #7F7F88;
  --primitive-color-lavender-neutral-600: #62626B;
  --primitive-color-lavender-neutral-700: #4C4C55;
  --primitive-color-lavender-neutral-800: #34353C;
  --primitive-color-lavender-neutral-900: #212127;
  --primitive-color-lavender-neutral-950: #131319;
  --primitive-font-family-fraunces: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --primitive-font-family-geist: 'Geist', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --primitive-font-family-geist-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --primitive-font-family-bricolage: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --primitive-font-family-dm-sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --primitive-font-family-dm-mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --primitive-font-family-instrument-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --primitive-font-family-inter: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --primitive-font-family-jetbrains-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --primitive-font-family-sora: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --primitive-font-family-manrope: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --primitive-font-family-plex-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --primitive-font-family-b612-mono: 'B612 Mono', ui-monospace, Consolas, monospace;
  --primitive-font-weight-light: 320;
  --primitive-font-weight-book: 360;
  --primitive-font-weight-regular: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-size-12: 0.75rem;
  --primitive-font-size-13: 0.8125rem;
  --primitive-font-size-15: 0.9375rem;
  --primitive-font-size-17: 1.0625rem;
  --primitive-font-size-20: 1.25rem;
  --primitive-font-size-24: 1.5rem;
  --primitive-space-0: 0;
  --primitive-space-1: 0.25rem;
  --primitive-space-2: 0.5rem;
  --primitive-space-3: 0.75rem;
  --primitive-space-4: 1rem;
  --primitive-space-5: 1.25rem;
  --primitive-space-6: 1.5rem;
  --primitive-space-8: 2rem;
  --primitive-space-10: 2.5rem;
  --primitive-space-12: 3rem;
  --primitive-space-16: 4rem;
  --primitive-space-20: 5rem;
  --primitive-space-24: 6rem;
  --primitive-space-32: 8rem;
  --primitive-space-40: 10rem;
  --primitive-radius-none: 0;
  --primitive-radius-xs: 0.375rem;
  --primitive-radius-sm: 0.625rem;
  --primitive-radius-md: 1rem;
  --primitive-radius-lg: 1.5rem;
  --primitive-radius-xl: 2rem;
  --primitive-radius-pill: 999px;
  --primitive-shadow-none: none;
  --primitive-shadow-float: 0 1px 1px rgba(11, 15, 13, 0.04), 0 18px 40px -18px rgba(11, 15, 13, 0.28);
  --primitive-duration-fast: 160ms;
  --primitive-duration-base: 240ms;
  --primitive-duration-slow: 420ms;
  --primitive-duration-reveal: 700ms;
  --primitive-duration-stagger: 80ms;
  --primitive-easing-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --primitive-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* === SEMANTIC (includes default palette + font set) === */
:root {
  --color-hover-tint: var(--primitive-color-alpha-ink-6);
  --color-text-success: var(--primitive-color-success-600);
  --pillar-learn-accent: var(--primitive-color-meadow-brand-700);
  --pillar-learn-soft: var(--primitive-color-meadow-brand-100);
  --pillar-education-accent: var(--primitive-color-sky-brand-700);
  --pillar-education-soft: var(--primitive-color-sky-brand-100);
  --pillar-career-accent: var(--primitive-color-sunshine-brand-600);
  --pillar-career-soft: var(--primitive-color-sunshine-brand-100);
  --font-weight-regular: var(--primitive-font-weight-regular);
  --font-weight-medium: var(--primitive-font-weight-medium);
  --font-weight-semibold: var(--primitive-font-weight-semibold);
  --text-display-size: clamp(3.25rem, 1.4rem + 7.4vw, 8.25rem);
  --text-display-line: 0.98;
  --text-page-title-size: clamp(2.75rem, 1.1rem + 5.2vw, 5.75rem);
  --text-heading-xl-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  --text-heading-xl-line: 1.04;
  --text-heading-xl-tracking: -0.03em;
  --text-heading-lg-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --text-heading-lg-line: 1.08;
  --text-heading-lg-tracking: -0.025em;
  --text-heading-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);
  --text-heading-line: 1.15;
  --text-heading-tracking: -0.02em;
  --text-title-size: 1.5rem;
  --text-title-line: 1.2;
  --text-title-tracking: -0.015em;
  --text-statement-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --text-statement-line: 1.2;
  --text-statement-tracking: -0.022em;
  --text-lead-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-lead-line: 1.5;
  --text-lead-tracking: -0.01em;
  --text-body-size: var(--primitive-font-size-17);
  --text-body-line: 1.6;
  --text-body-tracking: -0.005em;
  --text-small-size: var(--primitive-font-size-15);
  --text-small-line: 1.5;
  --text-caption-size: var(--primitive-font-size-13);
  --text-caption-line: 1.45;
  --text-eyebrow-size: var(--primitive-font-size-12);
  --text-eyebrow-line: 1;
  --text-eyebrow-tracking: 0.08em;
  --text-mono-tracking: 0.02em;
  --space-1: var(--primitive-space-1);
  --space-2: var(--primitive-space-2);
  --space-3: var(--primitive-space-3);
  --space-4: var(--primitive-space-4);
  --space-5: var(--primitive-space-5);
  --space-6: var(--primitive-space-6);
  --space-8: var(--primitive-space-8);
  --space-10: var(--primitive-space-10);
  --space-12: var(--primitive-space-12);
  --space-16: var(--primitive-space-16);
  --space-20: var(--primitive-space-20);
  --space-24: var(--primitive-space-24);
  --space-32: var(--primitive-space-32);
  --space-40: var(--primitive-space-40);
  --space-section: clamp(5rem, 3rem + 7vw, 10rem);
  --space-gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --space-container: 75rem;
  --space-measure: 36rem;
  --space-measure-wide: 50rem;
  --radius-xs: var(--primitive-radius-xs);
  --radius-sm: var(--primitive-radius-sm);
  --radius-md: var(--primitive-radius-md);
  --radius-lg: var(--primitive-radius-lg);
  --radius-xl: var(--primitive-radius-xl);
  --radius-pill: var(--primitive-radius-pill);
  --radius-control: var(--primitive-radius-pill);
  --radius-card: var(--primitive-radius-lg);
  --radius-panel: var(--primitive-radius-xl);
  --shadow-none: var(--primitive-shadow-none);
  --shadow-float: var(--primitive-shadow-float);
  --motion-duration-fast: var(--primitive-duration-fast);
  --motion-duration-base: var(--primitive-duration-base);
  --motion-duration-slow: var(--primitive-duration-slow);
  --motion-duration-reveal: var(--primitive-duration-reveal);
  --motion-stagger: var(--primitive-duration-stagger);
  --motion-ease-out: var(--primitive-easing-out);
  --motion-ease-in-out: var(--primitive-easing-in-out);
  --color-canvas: var(--primitive-color-meadow-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-meadow-neutral-100);
  --color-surface-tint: var(--primitive-color-meadow-brand-50);
  --color-surface-tint-strong: var(--primitive-color-meadow-brand-100);
  --color-surface-feature: var(--primitive-color-meadow-pop-200);
  --color-surface-accent-soft: var(--primitive-color-meadow-brand-100);
  --color-text: var(--primitive-color-meadow-neutral-950);
  --color-text-secondary: var(--primitive-color-meadow-neutral-700);
  --color-text-muted: var(--primitive-color-meadow-neutral-600);
  --color-text-disabled: var(--primitive-color-meadow-neutral-400);
  --color-text-accent: var(--primitive-color-meadow-brand-700);
  --color-text-on-feature: var(--primitive-color-meadow-neutral-950);
  --color-border: var(--primitive-color-meadow-neutral-200);
  --color-border-strong: var(--primitive-color-meadow-neutral-900);
  --color-border-tint: var(--primitive-color-meadow-brand-200);
  --color-accent: var(--primitive-color-meadow-brand-500);
  --color-accent-hover: var(--primitive-color-meadow-brand-600);
  --color-pop: var(--primitive-color-meadow-pop-400);
  --color-pop-soft: var(--primitive-color-meadow-pop-100);
  --color-action: var(--primitive-color-meadow-brand-700);
  --color-action-hover: var(--primitive-color-meadow-brand-800);
  --color-action-fg: var(--primitive-color-white);
  --color-focus: var(--primitive-color-meadow-brand-600);
  --color-wash-a: var(--primitive-color-meadow-brand-100);
  --color-wash-b: var(--primitive-color-meadow-pop-100);
  --font-display: var(--primitive-font-family-bricolage);
  --font-body: var(--primitive-font-family-dm-sans);
  --font-mono: var(--primitive-font-family-dm-sans);
  --font-soft: 0;
  --font-em-style: normal;
  --text-display-weight: 600;
  --text-heading-weight: 600;
  --text-display-tracking: -0.035em;
}

/* === COMPONENTS === */
:root {
  --focus-width: 2px;
  --focus-offset: 3px;
  --button-height: 3rem;
  --button-height-sm: 2.75rem;
  --button-padding-x: 1.375rem;
  --button-padding-x-sm: 1.125rem;
  --button-icon-size: 2rem;
  --button-icon-size-sm: 1.75rem;
  --button-icon-inset: 0.5rem;
  --button-icon-nudge: 0.1875rem;
  --button-radius: var(--radius-control);
  --button-font-size: var(--primitive-font-size-15);
  --button-font-weight: var(--primitive-font-weight-medium);
  --button-bg: var(--color-action);
  --button-fg: var(--color-action-fg);
  --button-hover-bg: var(--color-action-hover);
  --nav-height: 3.75rem;
  --nav-max-width: 62rem;
  --nav-offset: 1rem;
  --nav-bg: var(--primitive-color-alpha-white-72);
  --nav-bg-solid: var(--primitive-color-alpha-white-94);
  --nav-border: var(--color-border);
  --nav-blur: 18px;
  --glass-bg: var(--primitive-color-alpha-white-72);
  --glass-border: var(--color-border);
  --glass-blur: 18px;
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --panel-radius: var(--radius-panel);
  --panel-padding: clamp(1.75rem, 0.75rem + 4vw, 4.5rem);
  --feature-bg: var(--color-surface-feature);
  --feature-fg: var(--color-text-on-feature);
  --chip-height: 1.875rem;
  --chip-padding-x: 0.75rem;
  --chip-radius: var(--radius-pill);
  --chip-border: var(--color-border);
  --chip-fg: var(--color-text-secondary);
  --badge-bg: var(--color-surface-accent-soft);
  --badge-fg: var(--color-text-accent);
  --input-height: 3.25rem;
  --input-padding-x: 0.875rem;
  --input-radius: var(--primitive-radius-none);
  --input-bg: var(--color-surface-sunken);
  --input-bg-focus: var(--color-surface);
  --input-border: var(--color-text-secondary);
  --input-border-focus: var(--color-focus);
  --input-fg: var(--color-text);
  --input-placeholder: var(--color-text-muted);
  --input-error: var(--color-text-accent);
  --eyebrow-fg: var(--color-text-accent);
  --eyebrow-dot-size: 0.375rem;
  --icon-badge-size: 2.75rem;
  --icon-size: 1.375rem;
  --reveal-distance: 1rem;
}

/* === THEMES: PALETTE (default: meadow) === */
[data-palette="meadow"] {
  --color-canvas: var(--primitive-color-meadow-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-meadow-neutral-100);
  --color-surface-tint: var(--primitive-color-meadow-brand-50);
  --color-surface-tint-strong: var(--primitive-color-meadow-brand-100);
  --color-surface-feature: var(--primitive-color-meadow-pop-200);
  --color-surface-accent-soft: var(--primitive-color-meadow-brand-100);
  --color-text: var(--primitive-color-meadow-neutral-950);
  --color-text-secondary: var(--primitive-color-meadow-neutral-700);
  --color-text-muted: var(--primitive-color-meadow-neutral-600);
  --color-text-disabled: var(--primitive-color-meadow-neutral-400);
  --color-text-accent: var(--primitive-color-meadow-brand-700);
  --color-text-on-feature: var(--primitive-color-meadow-neutral-950);
  --color-border: var(--primitive-color-meadow-neutral-200);
  --color-border-strong: var(--primitive-color-meadow-neutral-900);
  --color-border-tint: var(--primitive-color-meadow-brand-200);
  --color-accent: var(--primitive-color-meadow-brand-500);
  --color-accent-hover: var(--primitive-color-meadow-brand-600);
  --color-pop: var(--primitive-color-meadow-pop-400);
  --color-pop-soft: var(--primitive-color-meadow-pop-100);
  --color-action: var(--primitive-color-meadow-brand-700);
  --color-action-hover: var(--primitive-color-meadow-brand-800);
  --color-action-fg: var(--primitive-color-white);
  --color-focus: var(--primitive-color-meadow-brand-600);
  --color-wash-a: var(--primitive-color-meadow-brand-100);
  --color-wash-b: var(--primitive-color-meadow-pop-100);
}

[data-palette="sky"] {
  --color-canvas: var(--primitive-color-sky-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-sky-neutral-100);
  --color-surface-tint: var(--primitive-color-sky-brand-50);
  --color-surface-tint-strong: var(--primitive-color-sky-brand-100);
  --color-surface-feature: var(--primitive-color-sky-pop-200);
  --color-surface-accent-soft: var(--primitive-color-sky-brand-100);
  --color-text: var(--primitive-color-sky-neutral-950);
  --color-text-secondary: var(--primitive-color-sky-neutral-700);
  --color-text-muted: var(--primitive-color-sky-neutral-600);
  --color-text-disabled: var(--primitive-color-sky-neutral-400);
  --color-text-accent: var(--primitive-color-sky-brand-700);
  --color-text-on-feature: var(--primitive-color-sky-neutral-950);
  --color-border: var(--primitive-color-sky-neutral-200);
  --color-border-strong: var(--primitive-color-sky-neutral-900);
  --color-border-tint: var(--primitive-color-sky-brand-200);
  --color-accent: var(--primitive-color-sky-brand-500);
  --color-accent-hover: var(--primitive-color-sky-brand-600);
  --color-pop: var(--primitive-color-sky-pop-400);
  --color-pop-soft: var(--primitive-color-sky-pop-100);
  --color-action: var(--primitive-color-sky-brand-700);
  --color-action-hover: var(--primitive-color-sky-brand-800);
  --color-action-fg: var(--primitive-color-white);
  --color-focus: var(--primitive-color-sky-brand-600);
  --color-wash-a: var(--primitive-color-sky-brand-100);
  --color-wash-b: var(--primitive-color-sky-pop-100);
}

[data-palette="lagoon"] {
  --color-canvas: var(--primitive-color-lagoon-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-lagoon-neutral-100);
  --color-surface-tint: var(--primitive-color-lagoon-brand-50);
  --color-surface-tint-strong: var(--primitive-color-lagoon-brand-100);
  --color-surface-feature: var(--primitive-color-lagoon-pop-200);
  --color-surface-accent-soft: var(--primitive-color-lagoon-brand-100);
  --color-text: var(--primitive-color-lagoon-neutral-950);
  --color-text-secondary: var(--primitive-color-lagoon-neutral-700);
  --color-text-muted: var(--primitive-color-lagoon-neutral-600);
  --color-text-disabled: var(--primitive-color-lagoon-neutral-400);
  --color-text-accent: var(--primitive-color-lagoon-brand-700);
  --color-text-on-feature: var(--primitive-color-lagoon-neutral-950);
  --color-border: var(--primitive-color-lagoon-neutral-200);
  --color-border-strong: var(--primitive-color-lagoon-neutral-900);
  --color-border-tint: var(--primitive-color-lagoon-brand-200);
  --color-accent: var(--primitive-color-lagoon-brand-500);
  --color-accent-hover: var(--primitive-color-lagoon-brand-600);
  --color-pop: var(--primitive-color-lagoon-pop-400);
  --color-pop-soft: var(--primitive-color-lagoon-pop-100);
  --color-action: var(--primitive-color-lagoon-brand-700);
  --color-action-hover: var(--primitive-color-lagoon-brand-800);
  --color-action-fg: var(--primitive-color-white);
  --color-focus: var(--primitive-color-lagoon-brand-600);
  --color-wash-a: var(--primitive-color-lagoon-brand-100);
  --color-wash-b: var(--primitive-color-lagoon-pop-100);
}

[data-palette="sunshine"] {
  --color-canvas: var(--primitive-color-sunshine-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-sunshine-neutral-100);
  --color-surface-tint: var(--primitive-color-sunshine-brand-50);
  --color-surface-tint-strong: var(--primitive-color-sunshine-brand-100);
  --color-surface-feature: var(--primitive-color-sunshine-brand-200);
  --color-surface-accent-soft: var(--primitive-color-sunshine-pop-100);
  --color-text: var(--primitive-color-sunshine-neutral-950);
  --color-text-secondary: var(--primitive-color-sunshine-neutral-700);
  --color-text-muted: var(--primitive-color-sunshine-neutral-600);
  --color-text-disabled: var(--primitive-color-sunshine-neutral-400);
  --color-text-accent: var(--primitive-color-sunshine-pop-700);
  --color-text-on-feature: var(--primitive-color-sunshine-neutral-950);
  --color-border: var(--primitive-color-sunshine-neutral-200);
  --color-border-strong: var(--primitive-color-sunshine-neutral-900);
  --color-border-tint: var(--primitive-color-sunshine-brand-300);
  --color-accent: var(--primitive-color-sunshine-brand-400);
  --color-accent-hover: var(--primitive-color-sunshine-brand-600);
  --color-pop: var(--primitive-color-sunshine-pop-400);
  --color-pop-soft: var(--primitive-color-sunshine-pop-100);
  --color-action: var(--primitive-color-sunshine-pop-700);
  --color-action-hover: var(--primitive-color-sunshine-pop-800);
  --color-action-fg: var(--primitive-color-white);
  --color-focus: var(--primitive-color-sunshine-pop-600);
  --color-wash-a: var(--primitive-color-sunshine-brand-100);
  --color-wash-b: var(--primitive-color-sunshine-pop-100);
}

[data-palette="lavender"] {
  --color-canvas: var(--primitive-color-lavender-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-lavender-neutral-100);
  --color-surface-tint: var(--primitive-color-lavender-brand-50);
  --color-surface-tint-strong: var(--primitive-color-lavender-brand-100);
  --color-surface-feature: var(--primitive-color-lavender-pop-200);
  --color-surface-accent-soft: var(--primitive-color-lavender-brand-100);
  --color-text: var(--primitive-color-lavender-neutral-950);
  --color-text-secondary: var(--primitive-color-lavender-neutral-700);
  --color-text-muted: var(--primitive-color-lavender-neutral-600);
  --color-text-disabled: var(--primitive-color-lavender-neutral-400);
  --color-text-accent: var(--primitive-color-lavender-brand-700);
  --color-text-on-feature: var(--primitive-color-lavender-neutral-950);
  --color-border: var(--primitive-color-lavender-neutral-200);
  --color-border-strong: var(--primitive-color-lavender-neutral-900);
  --color-border-tint: var(--primitive-color-lavender-brand-200);
  --color-accent: var(--primitive-color-lavender-brand-500);
  --color-accent-hover: var(--primitive-color-lavender-brand-600);
  --color-pop: var(--primitive-color-lavender-pop-400);
  --color-pop-soft: var(--primitive-color-lavender-pop-100);
  --color-action: var(--primitive-color-lavender-brand-700);
  --color-action-hover: var(--primitive-color-lavender-brand-800);
  --color-action-fg: var(--primitive-color-white);
  --color-focus: var(--primitive-color-lavender-brand-600);
  --color-wash-a: var(--primitive-color-lavender-brand-100);
  --color-wash-b: var(--primitive-color-lavender-pop-100);
}

/* === THEMES: FONTS (default: friendly) === */
[data-fonts="editorial"] {
  --font-display: var(--primitive-font-family-fraunces);
  --font-body: var(--primitive-font-family-geist);
  --font-mono: var(--primitive-font-family-geist);
  --font-soft: 50;
  --font-em-style: italic;
  --text-display-weight: 320;
  --text-heading-weight: 360;
  --text-display-tracking: -0.035em;
}

[data-fonts="friendly"] {
  --font-display: var(--primitive-font-family-bricolage);
  --font-body: var(--primitive-font-family-dm-sans);
  --font-mono: var(--primitive-font-family-dm-sans);
  --font-soft: 0;
  --font-em-style: normal;
  --text-display-weight: 600;
  --text-heading-weight: 600;
  --text-display-tracking: -0.035em;
}

[data-fonts="classic"] {
  --font-display: var(--primitive-font-family-instrument-serif);
  --font-body: var(--primitive-font-family-inter);
  --font-mono: var(--primitive-font-family-inter);
  --font-soft: 0;
  --font-em-style: italic;
  --text-display-weight: 400;
  --text-heading-weight: 400;
  --text-display-tracking: -0.015em;
}

[data-fonts="modern"] {
  --font-display: var(--primitive-font-family-sora);
  --font-body: var(--primitive-font-family-manrope);
  --font-mono: var(--primitive-font-family-manrope);
  --font-soft: 0;
  --font-em-style: normal;
  --text-display-weight: 500;
  --text-heading-weight: 500;
  --text-display-tracking: -0.04em;
}