/* ==========================================================================
   Boddu — design tokens
   Palette approximated from Boddu_Visuals.pdf swatches (no exact hex given).
   ========================================================================== */

:root {
  /* Brand core */
  --color-teal: #0094B3;
  --color-teal-dark: #007A93;
  --color-navy: #1E2C4A;
  --color-mint: #9FE0C7;
  --color-coral: #F08C7A;
  --color-yellow: #F5C84A;
  --color-cream: #F4F0E8;
  --color-sage: #D9DED3;

  /* Semantic */
  --color-bg: var(--color-cream);
  --color-bg-desktop: #ECEAE4;
  --color-surface: #FFFFFF;
  --color-text-primary: var(--color-navy);
  --color-text-secondary: #5B6472;
  --color-text-on-teal: #FFFFFF;
  --color-text-on-dark: #FFFFFF;
  --color-border-subtle: #E3DFD4;

  --color-tab-active: var(--color-teal);
  --color-tab-inactive: #A7ACA3;

  --card-teal-bg: var(--color-teal);
  --card-yellow-bg: var(--color-yellow);
  --card-sage-bg: var(--color-sage);
  --card-coral-bg: var(--color-coral);
  --card-mint-bg: var(--color-mint);
  --card-navy-bg: var(--color-navy);

  /* Radii */
  --radius-pill: 999px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;

  /* Shadows */
  --shadow-card: 0 4px 14px rgba(30, 44, 74, 0.08);
  --shadow-button: 0 6px 16px rgba(0, 148, 179, 0.35);
  --shadow-frame: 0 30px 60px -15px rgba(0, 0, 0, 0.35);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Typography */
  --font-family-base: 'Bricolage Grotesque', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --fs-display: 32px;
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-button: 16px;
}