/* ==========================================================================
   Sprout Design Tokens
   Generated from Figma tokens.json (Marketing Component Library)
   Two modes: Cream Light (default), Cream Dark
   ========================================================================== */

:root {

  /* ── Swatch / Gray ── */
  --swatch-gray-900: #161414;
  --swatch-gray-850: #262323;
  --swatch-gray-800: #2d2b2b;
  --swatch-gray-750: #383636;
  --swatch-gray-700: #444141;
  --swatch-gray-650: #504d4d;
  --swatch-gray-600: #5c5959;
  --swatch-gray-500: #747171;
  --swatch-gray-400: #8d8a8a;
  --swatch-gray-300: #a7a5a4;
  --swatch-gray-200: #c0bfbe;
  --swatch-gray-100: #dedddc;
  --swatch-gray-050: #f5f5f2;
  --swatch-gray-000: #fbfbf8;

  /* ── Swatch / Surface ── */
  --swatch-surface-100: #f5f5f2;
  --swatch-surface-200: #ecece8;
  --swatch-surface-300: #e2e1df;
  --swatch-surface-400: #d4d3d1;

  /* ── Swatch / Brand ── */
  --swatch-brand: #0ba5ec;
  --swatch-brand-emph: #0086c9;
  --swatch-oncolor-100: #ffffff;

  /* ── Swatch / Purple ── */
  --swatch-purple-500: #7b6ba3;
  --swatch-purple-100: #eeeaf5;
  --swatch-purple-800: #4a3875;

  /* ── Swatch / Green ── */
  --swatch-green-50: #f0fbea;
  --swatch-green-100: #e4f8da;
  --swatch-green-200: #d1f2c1;
  --swatch-green-300: #bdeba8;
  --swatch-green-400: #a8db91;
  --swatch-green-500: #8ccf70;
  --swatch-green-600: #6fa751;
  --swatch-green-700: #4f9140;
  --swatch-green-800: #3e7432;
  --swatch-green-900: #2d5724;

  /* ── Swatch / Yellow ── */
  --swatch-yellow-50: #fff6e5;
  --swatch-yellow-100: #fff2d8;
  --swatch-yellow-200: #f6dca8;
  --swatch-yellow-300: #e6cfa3;
  --swatch-yellow-400: #e7be73;
  --swatch-yellow-500: #cea55f;
  --swatch-yellow-600: #b68b4b;
  --swatch-yellow-700: #9c7136;
  --swatch-yellow-800: #7c5a23;
  --swatch-yellow-900: #5c4210;

  /* ── Swatch / Blue ── */
  --swatch-blue-50: #f3fbff;
  --swatch-blue-100: #dff5ff;
  --swatch-blue-200: #cfeaf8;
  --swatch-blue-300: #b2e7ff;
  --swatch-blue-400: #a9daf3;
  --swatch-blue-500: #8fd2f1;
  --swatch-blue-600: #3583a8;
  --swatch-blue-700: #20517c;
  --swatch-blue-800: #154063;
  --swatch-blue-900: #0a2e4a;

  /* ── Swatch / Red ── */
  --swatch-red-50: #fff0ed;
  --swatch-red-100: #ffe2dd;
  --swatch-red-200: #efc1bd;
  --swatch-red-300: #dfa8a1;
  --swatch-red-400: #dc8b82;
  --swatch-red-500: #d96d62;
  --swatch-red-600: #af5e52;
  --swatch-red-700: #8f4f47;
  --swatch-red-800: #74403a;
  --swatch-red-900: #59312d;

  /* ── Theme — Cream Light ── */
  --theme-bg-primary: var(--swatch-surface-100);
  --theme-bg-secondary: var(--swatch-gray-000);
  --theme-bg-tertiary: var(--swatch-surface-200);
  --theme-bg-transparency: rgba(245, 245, 242, 0.75);
  --theme-border-primary: var(--swatch-surface-400);
  --theme-border-secondary: var(--swatch-gray-100);
  --theme-border-selected: var(--swatch-gray-850);
  --theme-border-tertiary: var(--swatch-surface-300);
  --theme-button-primary-bg: var(--swatch-brand);
  --theme-button-primary-hover-bg: var(--swatch-brand-emph);
  --theme-button-primary-text: var(--swatch-gray-000);
  --theme-button-secondary-bg: var(--swatch-gray-000);
  --theme-button-secondary-hover-bg: var(--swatch-surface-300);
  --theme-button-secondary-text: var(--swatch-gray-850);
  --theme-checkbox-bg-checked: var(--swatch-gray-850);
  --theme-checkbox-check: var(--swatch-gray-000);
  --theme-fg-primary: var(--swatch-gray-850);
  --theme-fg-secondary: var(--swatch-gray-600);
  --theme-fg-tertiary: var(--swatch-gray-400);
  --theme-input-bg: var(--swatch-gray-000);
  --theme-input-bg-disabled: var(--swatch-surface-200);
  --theme-input-border: var(--swatch-surface-400);
  --theme-input-border-error: var(--swatch-red-500);
  --theme-input-border-focus: var(--swatch-brand);
  --theme-input-border-hover: var(--swatch-gray-400);
  --theme-input-error-text: var(--swatch-red-700);
  --theme-input-helper: var(--swatch-gray-600);
  --theme-input-label: var(--swatch-gray-850);
  --theme-input-placeholder: var(--swatch-gray-400);
  --theme-input-text: var(--swatch-gray-850);
  --theme-input-text-disabled: var(--swatch-gray-400);
  --theme-toggle-bg: var(--swatch-surface-400);
  --theme-toggle-bg-active: var(--swatch-brand);
  --theme-toggle-knob: var(--swatch-gray-000);

  /* ── Semantic / Status Colors ── */
  --semantic-blue-bg: var(--swatch-blue-200);
  --semantic-blue-border: var(--swatch-blue-400);
  --semantic-blue-text: var(--swatch-blue-700);
  --semantic-green-bg: var(--swatch-green-200);
  --semantic-green-border: var(--swatch-green-400);
  --semantic-green-text: var(--swatch-green-700);
  --semantic-red-bg: var(--swatch-red-200);
  --semantic-red-border: var(--swatch-red-400);
  --semantic-red-text: var(--swatch-red-700);
  --semantic-yellow-bg: var(--swatch-yellow-200);
  --semantic-yellow-border: var(--swatch-yellow-400);
  --semantic-yellow-text: var(--swatch-yellow-700);

  /* ── Spacing (space/*) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-4xl: 24px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ── Typography (type/*) ── */
  --type-body-lg-size: 18px;
  --type-body-lg-line: 28px;
  --type-body-base-size: 16px;
  --type-body-base-line: 24px;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-label-md-size: 14px;
  --type-label-md-line: 20px;
  --type-label-sm-size: 12px;
  --type-label-sm-line: 16px;
  --type-label-xs-size: 13px;
  --type-label-xs-line: 18px;

  /* ── Font ── */
  --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Display sizes (fluid, web-only) ── */
  --font-size-display-2xl: clamp(2.25rem, 1.2rem + 3.3vw, 4.5rem);
  --font-size-display-xl: clamp(1.875rem, 1rem + 2.7vw, 3.75rem);
  --font-size-display-lg: clamp(1.5rem, 0.85rem + 2vw, 3rem);
  --font-size-display-md: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  --font-size-display-sm: clamp(1.125rem, 0.7rem + 1.3vw, 1.875rem);
  --font-size-display-xs: clamp(1.125rem, 0.85rem + 0.9vw, 1.5rem);
  --line-height-display-2xl: clamp(2.75rem, 1.5rem + 3.9vw, 5.625rem);
  --line-height-display-xl: clamp(2.375rem, 1.3rem + 3.4vw, 4.5rem);
  --line-height-display-lg: clamp(2rem, 1.1rem + 2.8vw, 3.75rem);
  --line-height-display-md: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  --line-height-display-sm: clamp(1.5rem, 1rem + 1.5vw, 2.375rem);
  --line-height-display-xs: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  --letter-spacing-display: -0.02em;
  --letter-spacing-text: 0;

  /* ── Breakpoints ── */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ── Cream Dark ── */
html[data-theme="dark"] {
  --theme-bg-primary: var(--swatch-gray-900);
  --theme-bg-secondary: var(--swatch-gray-850);
  --theme-bg-tertiary: var(--swatch-gray-800);
  --theme-bg-transparency: rgba(22, 20, 20, 0.75);
  --theme-border-primary: var(--swatch-gray-650);
  --theme-border-secondary: var(--swatch-gray-700);
  --theme-border-selected: var(--swatch-gray-050);
  --theme-border-tertiary: var(--swatch-gray-750);
  --theme-button-primary-bg: var(--swatch-brand);
  --theme-button-primary-hover-bg: var(--swatch-brand-emph);
  --theme-button-primary-text: var(--swatch-gray-900);
  --theme-button-secondary-bg: var(--swatch-gray-750);
  --theme-button-secondary-hover-bg: var(--swatch-gray-700);
  --theme-button-secondary-text: var(--swatch-gray-050);
  --theme-checkbox-bg-checked: var(--swatch-gray-050);
  --theme-checkbox-check: var(--swatch-gray-900);
  --theme-fg-primary: var(--swatch-gray-050);
  --theme-fg-secondary: var(--swatch-gray-200);
  --theme-fg-tertiary: var(--swatch-gray-400);
  --theme-input-bg: var(--swatch-gray-800);
  --theme-input-bg-disabled: var(--swatch-gray-750);
  --theme-input-border: var(--swatch-gray-650);
  --theme-input-border-error: var(--swatch-red-400);
  --theme-input-border-focus: var(--swatch-brand);
  --theme-input-border-hover: var(--swatch-gray-400);
  --theme-input-error-text: var(--swatch-red-300);
  --theme-input-helper: var(--swatch-gray-400);
  --theme-input-label: var(--swatch-gray-050);
  --theme-input-placeholder: var(--swatch-gray-500);
  --theme-input-text: var(--swatch-gray-050);
  --theme-input-text-disabled: var(--swatch-gray-600);
  --theme-toggle-bg: var(--swatch-gray-650);
  --theme-toggle-bg-active: var(--swatch-brand);
  --theme-toggle-knob: var(--swatch-gray-000);
  --swatch-brand: #38bdf8;
  --swatch-brand-emph: #0ba5ec;
  --semantic-blue-bg: var(--swatch-blue-800);
  --semantic-blue-border: var(--swatch-blue-600);
  --semantic-blue-text: var(--swatch-blue-100);
  --semantic-green-bg: var(--swatch-green-800);
  --semantic-green-border: var(--swatch-green-600);
  --semantic-green-text: var(--swatch-green-100);
  --semantic-red-bg: var(--swatch-red-800);
  --semantic-red-border: var(--swatch-red-600);
  --semantic-red-text: var(--swatch-red-100);
  --semantic-yellow-bg: var(--swatch-yellow-800);
  --semantic-yellow-border: var(--swatch-yellow-600);
  --semantic-yellow-text: var(--swatch-yellow-100);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --theme-bg-primary: var(--swatch-gray-900);
    --theme-bg-secondary: var(--swatch-gray-850);
    --theme-bg-tertiary: var(--swatch-gray-800);
    --theme-bg-transparency: rgba(22, 20, 20, 0.75);
    --theme-border-primary: var(--swatch-gray-650);
    --theme-border-secondary: var(--swatch-gray-700);
    --theme-border-selected: var(--swatch-gray-050);
    --theme-border-tertiary: var(--swatch-gray-750);
    --theme-button-primary-bg: var(--swatch-brand);
    --theme-button-primary-hover-bg: var(--swatch-brand-emph);
    --theme-button-primary-text: var(--swatch-gray-900);
    --theme-button-secondary-bg: var(--swatch-gray-750);
    --theme-button-secondary-hover-bg: var(--swatch-gray-700);
    --theme-button-secondary-text: var(--swatch-gray-050);
    --theme-checkbox-bg-checked: var(--swatch-gray-050);
    --theme-checkbox-check: var(--swatch-gray-900);
    --theme-fg-primary: var(--swatch-gray-050);
    --theme-fg-secondary: var(--swatch-gray-200);
    --theme-fg-tertiary: var(--swatch-gray-400);
    --theme-input-bg: var(--swatch-gray-800);
    --theme-input-bg-disabled: var(--swatch-gray-750);
    --theme-input-border: var(--swatch-gray-650);
    --theme-input-border-error: var(--swatch-red-400);
    --theme-input-border-focus: var(--swatch-brand);
    --theme-input-border-hover: var(--swatch-gray-400);
    --theme-input-error-text: var(--swatch-red-300);
    --theme-input-helper: var(--swatch-gray-400);
    --theme-input-label: var(--swatch-gray-050);
    --theme-input-placeholder: var(--swatch-gray-500);
    --theme-input-text: var(--swatch-gray-050);
    --theme-input-text-disabled: var(--swatch-gray-600);
    --theme-toggle-bg: var(--swatch-gray-650);
    --theme-toggle-bg-active: var(--swatch-brand);
    --theme-toggle-knob: var(--swatch-gray-000);
    --swatch-brand: #38bdf8;
    --swatch-brand-emph: #0ba5ec;
    --semantic-blue-bg: var(--swatch-blue-800);
    --semantic-blue-border: var(--swatch-blue-600);
    --semantic-blue-text: var(--swatch-blue-100);
    --semantic-green-bg: var(--swatch-green-800);
    --semantic-green-border: var(--swatch-green-600);
    --semantic-green-text: var(--swatch-green-100);
    --semantic-red-bg: var(--swatch-red-800);
    --semantic-red-border: var(--swatch-red-600);
    --semantic-red-text: var(--swatch-red-100);
    --semantic-yellow-bg: var(--swatch-yellow-800);
    --semantic-yellow-border: var(--swatch-yellow-600);
    --semantic-yellow-text: var(--swatch-yellow-100);
    color-scheme: dark;
  }
}

/* ── Legacy aliases ── */
:root {
  --gray-25: var(--swatch-gray-000);
  --gray-50: var(--swatch-gray-050);
  --gray-100: var(--swatch-gray-100);
  --gray-200: var(--swatch-gray-200);
  --gray-300: var(--swatch-gray-300);
  --gray-400: var(--swatch-gray-400);
  --gray-500: var(--swatch-gray-500);
  --gray-600: var(--swatch-gray-600);
  --gray-700: var(--swatch-gray-650);
  --gray-800: var(--swatch-gray-700);
  --gray-900: var(--swatch-gray-850);
  --gray-950: var(--swatch-gray-900);
  --brand-500: var(--swatch-brand);
  --brand-600: var(--swatch-brand-emph);
  --brand-400: #36bffa;
  --brand-300: #7cd4fd;
  --brand-200: #b9e6fe;
  --brand-100: #e0f2fe;
  --brand-50: #f0f9ff;
  --brand-25: #f5fbff;
  --sprout-100: #e6f4d7;
  --sprout-300: #acdc79;
  --sprout-400: #86cb3c;
  --sprout-500: #669f2a;
  --sprout-600: #4f7a21;
  --spacing-xxs: 2px;
  --spacing-xs: var(--space-1);
  --spacing-sm: 6px;
  --spacing-md: var(--space-2);
  --spacing-lg: var(--space-3);
  --spacing-xl: var(--space-4);
  --spacing-2xl: var(--space-5);
  --spacing-3xl: var(--space-6);
  --radius-xs: var(--radius-sm);
  --radius-xl: var(--radius-lg);
  --font-size-text-xl: 1.25rem;
  --font-size-text-lg: var(--type-body-lg-size);
  --font-size-text-md: var(--type-body-base-size);
  --font-size-text-sm: var(--type-body-sm-size);
  --font-size-text-xs: var(--type-caption-size);
  --line-height-text-xl: 1.875rem;
  --line-height-text-lg: var(--type-body-lg-line);
  --line-height-text-md: var(--type-body-base-line);
  --line-height-text-sm: var(--type-body-sm-line);
  --line-height-text-xs: var(--type-caption-line);
}