/* Design tokens — ported from tailwind.config.ts */
:root {
  /* Colors */
  --color-dark-bg: #0c0b09;
  --color-dark-surface: #29261f;
  --color-dark-hero: #000000;
  --color-accent: #cda45e;
  --color-green: #133B31;
  --color-green-hover: #0f2f27;
  --color-terracotta: #C05A3E;
  --color-teal: #1B5E5E;
  --color-teal-hover: #134848;
  --color-teal-soft: #E8F3F2;
  --color-page: #F0F5F4;
  --color-surface: #FFFFFF;
  --color-border: #DDE8E6;
  --color-text: #1A2E2A;
  --color-text-muted: #6B7B78;
  --color-text-light: rgba(255, 255, 255, 0.7);
  --color-text-heading: #ffffff;
  --color-red-alert: #DC2626;
  --color-red-soft: #FEF2F2;
  --color-amber-400: #FBBF24;

  /* Fonts */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --font-nav: 'Poppins', system-ui, sans-serif;

  /* Breakpoints (use in JS, mirrored here for reference) */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1280px;

  /* Spacing */
  --max-content: 1280px;
  --header-h: 72px;
}