/* ==========================================================================
   bearhug-site — DESIGN TOKENS (single source of truth)
   Brand canon comes from Bearhug\bearhug-it\brand\masters\README.md (ruled
   2026-08-12). Never eyedrop a PNG — including the homepage design comp.
   ========================================================================== */

:root {
  /* ---- brand canon ---- */
  --navy:    #07182D;   /* bear, wordmark, navy sections, primary text */
  --orange:  #FE7116;   /* CTAs, accents, active states */
  --page:    #F6F8FB;   /* light section background */
  --surface: #FFFFFF;   /* cards, panels, alternating sections */

  /* ---- neutrals (derived, not brand) ---- */
  --ink:        var(--navy);
  --ink-soft:   #3D4C61;             /* secondary text on light */
  --ink-muted:  #6B7A8F;             /* tertiary/small text on light */
  --line:       #E3E8F0;             /* card + hairline borders on light */
  --navy-2:     #0C2340;             /* raised surfaces on navy (tiles, frames) */
  --line-onnavy:rgba(255,255,255,.16);
  --text-onnavy:#FFFFFF;
  --text-onnavy-soft: #C4CFDD;

  /* ---- type ----
     Fredoka = headline face (site text weight 500; the wordmark itself is a
     fixed SVG asset — never re-set it in CSS). Inter = body/UI face. */
  --font-head: "Fredoka", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --h1-size: 58px;      --h1-lh: 1.08;   /* hero headline (Fredoka 500) */
  --h2-size: 32px;      --h2-lh: 1.15;   /* section headlines (Fredoka 500) */
  --h3-size: 22px;      --h3-lh: 1.15;   /* card headlines 21–24 (Fredoka 500) */
  --lead-size: 19px;    --lead-lh: 1.55; /* hero body (Inter 400) */
  --body-size: 16px;    --body-lh: 1.55; /* body (Inter 400) */
  --nav-size: 15px;                      /* nav links (Inter 500/600) */
  --btn-size: 16px;                      /* buttons (Inter 600) */
  --eyebrow-size: 13px;                  /* eyebrow (Inter 600, tracked) */
  --eyebrow-track: .08em;
  --small-size: 13px;                    /* small/legal 12–14 */

  /* ---- spacing scale ---- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
  --sp-6: 64px; --sp-7: 80px; --sp-8: 96px; --sp-9: 120px;

  /* ---- layout ---- */
  --maxw: 1240px;

  /* ---- cards ---- */
  --radius-card: 14px;       /* 12–16 band */
  --radius-tile: 12px;
  --shadow-card: 0 1px 3px rgba(7,24,45,.06), 0 1px 2px rgba(7,24,45,.04);

  /* ---- buttons ----
     ACCESSIBILITY DEVIATION FROM THE DESIGN COMP (deliberate, documented):
     the comp shows WHITE text on orange buttons — white on #FE7116 ≈ 2.8:1,
     which FAILS WCAG AA for normal text. All solid-orange buttons therefore
     use NAVY #07182D text (≈ 6.2:1, passes AA). Ghost/outline buttons on navy
     keep white text (white on #07182D ≈ 16:1). Do not "fix" this back.       */
  --btn-h: 50px;             /* 48–52 band */
  --btn-pad-x: 24px;
  --btn-radius: 10px;
  --btn-solid-bg: var(--orange);
  --btn-solid-text: var(--navy);
  --btn-ghost-border: rgba(255,255,255,.45);
  --btn-ghost-text: #FFFFFF;

  /* ---- focus ---- */
  --focus-ring: 2px solid var(--orange);
  --focus-offset: 2px;
}

/* ---- self-hosted fonts (no CDN calls; woff2 only) ---- */
@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}