/* Theme variables extracted exactly from design.md */
:root {
  /* Colors - MD3 Palette */
  --color-surface: #faf8ff;
  --color-surface-dim: #d2d9f4;
  --color-surface-bright: #faf8ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f3ff;
  --color-surface-container: #eaedff;
  --color-surface-container-high: #e2e7ff;
  --color-surface-container-highest: #dae2fd;
  --color-on-surface: #131b2e;
  --color-on-surface-variant: #444653;
  --color-inverse-surface: #283044;
  --color-inverse-on-surface: #eef0ff;
  --color-outline: #757684;
  --color-outline-variant: #c4c5d5;
  --color-surface-tint: #3755c3;
  --color-primary: #00288e;
  --color-on-primary: #ffffff;
  --color-primary-container: #1e40af;
  --color-on-primary-container: #a8b8ff;
  --color-inverse-primary: #b8c4ff;
  --color-secondary: #006398;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #5bb8fe;
  --color-on-secondary-container: #00476e;
  --color-tertiary: #4c2e00;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #6b4200;
  --color-on-tertiary-container: #ffa929;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #dde1ff;
  --color-primary-fixed-dim: #b8c4ff;
  --color-on-primary-fixed: #001453;
  --color-on-primary-fixed-variant: #173bab;
  --color-secondary-fixed: #cce5ff;
  --color-secondary-fixed-dim: #93ccff;
  --color-on-secondary-fixed: #001d31;
  --color-on-secondary-fixed-variant: #004b73;
  --color-tertiary-fixed: #ffddb8;
  --color-tertiary-fixed-dim: #ffb95f;
  --color-on-tertiary-fixed: #2a1700;
  --color-on-tertiary-fixed-variant: #653e00;
  --color-background: #faf8ff;
  --color-on-background: #131b2e;
  --color-surface-variant: #dae2fd;

  /* Colors - Brand specific */
  --color-brand-royal-600: #2563EB;
  --color-brand-royal-700: #1D4ED8;
  --color-brand-sky-400: #38BDF8;
  --color-brand-sky-50: #F0F9FF;
  --color-surface-ice: #F8FAFC;
  --color-surface-card-tint: #F1F5F9;
  --color-border-subtle: #E2E8F0;
  --color-border-focus: #93C5FD;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-badge-premium-bg: #FEF3C7;
  --color-badge-premium-text: #B45309;
  --color-badge-free-bg: #DCFCE7;
  --color-badge-free-text: #15803D;
  --color-social-whatsapp: #25D366;

  /* Typography Scale */
  --font-family: 'Manrope', sans-serif;
  
  --font-hero-size: 48px;
  --font-hero-weight: 800;
  --font-hero-lh: 56px;
  --font-hero-ls: -0.02em;
  
  --font-hero-mob-size: 32px;
  --font-hero-mob-weight: 800;
  --font-hero-mob-lh: 40px;
  --font-hero-mob-ls: -0.01em;

  --font-hl-lg-size: 32px;
  --font-hl-lg-weight: 700;
  --font-hl-lg-lh: 40px;
  --font-hl-lg-ls: -0.015em;
  
  --font-hl-lg-mob-size: 24px;
  --font-hl-lg-mob-weight: 700;
  --font-hl-lg-mob-lh: 32px;
  --font-hl-lg-mob-ls: -0.01em;

  --font-hl-md-size: 24px;
  --font-hl-md-weight: 600;
  --font-hl-md-lh: 32px;
  --font-hl-md-ls: -0.01em;

  --font-hl-sm-size: 20px;
  --font-hl-sm-weight: 600;
  --font-hl-sm-lh: 28px;
  
  --font-title-md-size: 16px;
  --font-title-md-weight: 600;
  --font-title-md-lh: 24px;

  --font-body-lg-size: 18px;
  --font-body-lg-weight: 400;
  --font-body-lg-lh: 28px;

  --font-body-md-size: 15px;
  --font-body-md-weight: 400;
  --font-body-md-lh: 24px;

  --font-body-sm-size: 13px;
  --font-body-sm-weight: 400;
  --font-body-sm-lh: 20px;

  --font-label-md-size: 14px;
  --font-label-md-weight: 600;
  --font-label-md-lh: 20px;
  --font-label-md-ls: 0.01em;

  --font-label-sm-size: 12px;
  --font-label-sm-weight: 600;
  --font-label-sm-lh: 16px;
  --font-label-sm-ls: 0.02em;

  --font-badge-xs-size: 11px;
  --font-badge-xs-weight: 700;
  --font-badge-xs-lh: 14px;
  --font-badge-xs-ls: 0.04em;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --gutter-desktop: 1.5rem;
  --gutter-tablet: 1rem;
  --gutter-mobile: 0.75rem;
  --container-max-width: 1320px;
  --touch-target-min: 44px;

  /* Rounded */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-elevation-1: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(30, 64, 175, 0.05);
  --shadow-elevation-2: 0 8px 24px -4px rgba(30, 64, 175, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-elevation-3: 0 -4px 20px -2px rgba(15, 23, 42, 0.08), 0 12px 32px -4px rgba(30, 64, 175, 0.12);
  --shadow-elevation-4: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
}