/* ── Design tokens ─────────────────────────────────────────────
   Single source of truth for brand colors, typography, and spacing.
   Imported by both server-rendered templates and the SPA (via app.css).

   IMPORTANT: @font-face url() paths must be absolute (/static/...)
   because this file is imported by Vite via app.css — relative paths
   would break when inlined into the compiled SPA CSS bundle.
   ──────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts (Latin subset, variable) ─────────────── */

@font-face {
  font-family: 'DM Sans';
  src: url('/static/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Variables ──────────────────────────────────────────────── */

:root {
  /* Colors */
  --base:         #F5FEFA;   /* warm cream with teal tint  */
  --primary:      #00A896;   /* transformative teal        */
  --primary-dark: #008F80;   /* teal hover / pressed       */
  --acid:         #CCFF00;   /* acid chartreuse accent     */
  --coral:        #FF3350;   /* hot coral warmth           */
  --text:         #0A1A18;   /* near-black, teal-tinted    */
  --muted:        #5A7270;   /* muted teal-gray            */
  --border:       rgba(0,168,150,0.12);
  --section-alt:  #EDF8F5;   /* light teal wash            */

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}