/* tokens.css
   Design tokens (Figma -> CSS variables). Kept intentionally minimal for now. */

:root {
  /* Typography (Fonts) */
  --font-primary: 'Marcellus', serif;
  --font-secondary: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Font Sizes */
  --font-size-2xs: 12px; /* 12px */
  --font-size-xs: 11px; /* 11px */
  --font-size-sm: 14px; /* 14px */
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 64px;
  --font-size-34: 34px;
  --font-size-48: 48px;
  --font-size-72: 72px;

  /* Colors */
  --color-page-bg: #e7edef;
  --color-white: #ffffff;
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-white-75: rgba(255, 255, 255, 0.75);
  --color-text-strong: #0c2715;
  --color-black: #000000;
  --color-text-muted: #6c737f;
  --color-text-secondary: #565656;
  --color-explore-cta-text: #33397f;
  --color-lavender-soft: #d7cffc;
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-overlay-brown-60: rgba(41, 29, 21, 0.6);
  --color-overlay-brown-0: rgba(67, 48, 35, 0);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px; /* 28px */
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px; /* 60px */
  --space-16: 64px;
  --space-20: 80px;
  --space-21: 92px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2xl: 32px;
  --radius-pill: 80px;

  /* Custom Breakpoints */
  --breakpoint-desktop-xl: 1920px;

  /* Layout — Header heights (mobile-first) */
  --header-row1-h: 58px;
  --header-row2-h: 45px;
}

@media (min-width: 768px) {
  :root {
    --header-row1-h: 74px;
    --header-row2-h: 52px;
  }
}