/* =====================================================================
   HyperExposed — shared light design system.
   Load AFTER theme.css (the dark base): these :root overrides flip the
   token-driven components to light. Used by the individual-facing surfaces
   (nl.html landing, /gids Survivalgids, …). Page-specific components stay
   in each page. Palette + type scale snapped to the Gusmanson Figma export.

   Fonts are self-hosted OFL stand-ins for the trial ABC faces
   (Bricolage Grotesque → ABC Whyte Inktrap; Hanken Grotesk → ABC Whyte).
   Swap the @font-face src for licensed ABC files if/when purchased.
   ===================================================================== */

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/bricolage-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/bricolage-700-latinext.woff2') format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/hanken-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/hanken-400-latinext.woff2') format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/hanken-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/hanken-500-latinext.woff2') format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/hanken-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/hanken-600-latinext.woff2') format('woff2'); unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* display face → headings, wordmark, primary buttons */
h1, h2.sec-h, .brand-name, .he-btn,
.hero-copy h1, .cta-inner h2, .how-step h3, .faq-item > summary,
.check-btn, .cta-btn { font-family: var(--font-display); }

/* ---- LIGHT-THEME TOKEN OVERRIDE (wins over theme.css :root) ---------- */
:root {
  --font-sans: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', 'Inter', sans-serif;

  --bg-page: #ffffff;
  --bg-surface: #F8F8F4;      /* off-white alt sections */
  --bg-card: #ffffff;
  --bg-card-strong: #FBFBF8;

  --text-primary: #111827;    /* ink */
  --text-secondary: #374151;
  --text-muted: #676767;      /* Figma body grey */
  --text-faint: #8b93a1;
  --text-faintest: #aab0bb;

  --border-subtle: rgba(17, 24, 39, 0.08);
  --border-medium: rgba(17, 24, 39, 0.13);
  --border-strong: rgba(17, 24, 39, 0.22);

  --hot: #FC614C;             /* Figma coral */
  --hot-glow: #FA6147;        /* dirigent brand coral */
  --hot-border: rgba(252, 97, 76, 0.32);
  --hot-bg: rgba(252, 97, 76, 0.08);
  --hot-bg-soft: rgba(252, 97, 76, 0.05);
  --brick: #893C2B;           /* Figma button */
  --brick-hover: #6F2F22;
  --purple: #8C6CFF;          /* accent (illustration-adjacent) */

  --lav: #E1D8FF;
  --lav-soft: #EFEBFF;
  --lav-panel: #E1D8FF;
  --cream: #F9F0DC;

  /* official deep tones (Kleuren slide) — for on-brand dark accents */
  --maroon: #56261C;
  --teal: #1B4547;
  --teal-deep: #133234;

  --good: #2e8b57;
  --good-bg: rgba(46, 139, 87, 0.10);
  --good-border: rgba(46, 139, 87, 0.34);
  --warning: #b9791b;
  --warning-bg: rgba(233, 168, 51, 0.16);
  --warning-border: rgba(233, 168, 51, 0.44);
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- NAV (light) ----------------------------------------------------- */
.nav { border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,0.9); backdrop-filter: saturate(1.2) blur(6px); position: sticky; top: 0; z-index: 40; }
.brand-name { font-weight: 700; font-size: 1.625rem; letter-spacing: -0.015em; color: var(--text-primary); }
.nav-links a { color: var(--text-muted); font-weight: 500; font-size: 0.95rem; }
.nav-links a:hover { color: var(--text-primary); }
.nav-cta { color: var(--brick) !important; font-weight: 600 !important; }
.nav-cta:hover { color: var(--brick-hover) !important; }

/* HyperExposed wordmark mark (4 coral rects, per Figma) */
.he-mark { width: 27px; height: 26px; display: block; }

/* ---- SECTION SCAFFOLD ------------------------------------------------ */
.section { max-width: 1080px; margin: 0 auto; padding: 96px 24px; }
.section-alt { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hot); margin: 0 0 14px; }
h2.sec-h { font-size: clamp(1.85rem, 3.3vw, 2.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 12px; color: var(--text-primary); text-wrap: balance; }

/* ---- REUSABLE BUTTONS (sharp, per Figma) ----------------------------- */
.he-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; background: var(--brick); color: #fff; font-weight: 600; font-size: 1rem; border: none; border-radius: 0; cursor: pointer; text-decoration: none; transition: background 0.15s ease; }
.he-btn:hover { background: var(--brick-hover); color: #fff; }
.he-btn-out { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; background: transparent; color: var(--brick); border: 1px solid var(--border-strong); font-weight: 600; font-size: 1.05rem; border-radius: 0; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.he-btn-out:hover { border-color: var(--brick); background: var(--hot-bg); color: var(--brick-hover); }

/* ---- FOOTER (light) -------------------------------------------------- */
.site-footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); padding: 64px 24px 40px; }
.footer-tag { color: var(--text-faint); }
.footer-h { color: var(--text-faint); }
.footer-col a { color: var(--text-muted); }
.footer-col a:hover { color: var(--text-primary); }
.footer-powered { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-faint); margin-top: 18px; }
.footer-powered svg { width: 16px; height: 16px; }
.footer-bottom { color: var(--text-faintest); }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }