/* ─────────────────────────────────────────────────────────────────
   Design tokens — lifted from the WordPress theme's theme.json.

   This is the whole reason the promo site can leave WordPress without
   a redesign. The theme carried its palette, type scale and spacing
   as data rather than as scattered CSS, so it transfers verbatim
   instead of being re-eyeballed. Values here match
   TrailsIQ-Theme/theme.json and TrailsIQ-Theme/assets/css/frontend.css
   exactly — if the two ever disagree, the THEME is still the original
   and this file is the copy.

   The `--wp--preset--*` names are deliberately NOT reproduced. Those
   are WordPress's generated variable names; carrying them into a
   static site would be cargo-culting the old host's plumbing into the
   thing that replaced it.
   ───────────────────────────────────────────────────────────────── */

:root {
    /* Palette. Named for what they are rather than where they are
       used, same as the theme — `--forest` survives a redesign that
       `--nav-background` would not. */
    --forest:   #1a2e1a;
    --pine:     #2d4a2d;
    --moss:     #4a6741;
    --sage:     #7a9e6e;
    --fern:     #a8c49a;
    --mist:     #e8f0e5;
    --earth:    #8c6239;
    --bark:     #5c3f22;
    --sand:     #f2ead8;
    --white:    #ffffff;
    --offwhite: #f9f7f3;
    --ink:      #1a1a18;
    --mid:      #4a4a45;
    --light:    #9a9a92;
    --accent:   #dd9b36;
    --accentlt: #ef970c;

    /* Type. Bebas Neue sets every heading; DM Sans is body; DM Mono
       is reserved for small uppercase labels (footer column headings,
       eyebrow text). */
    --font-display: 'Bebas Neue', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-mono:    'DM Mono', monospace;

    --text-xs:    11px;
    --text-small: 13px;
    --text-med:   16px;
    --text-large: 20px;
    --text-xl:    28px;
    --text-2xl:   42px;
    --text-3xl:   58px;
    --text-hero:  clamp(56px, 9vw, 120px);

    /* Spacing scale — the theme's six steps. */
    --space-xs:  20px;
    --space-s:   40px;
    --space-m:   60px;
    --space-l:   80px;
    --space-xl:  100px;
    --space-2xl: 120px;

    /* Layout + chrome */
    --content-width: 1200px;
    --wide-width:    1440px;
    --radius:        6px;
    --radius-lg:     12px;
    --nav-h:         64px;
}