/* ============================================================
   BASIS — palet, zonesysteem en basiselementen.
   Gedeeld door de homepage en /schedules. Stond inline in index.html;
   op twee plekken onderhouden gaat mis, en dat is in dit project al
   twee keer gebeurd met de kleurtokens.
   ============================================================ */
:root{
  /* JUST WANNA TRAIN — TBD brand palette */
  /* LIGHT base theme — white page, black ink (zones flip to dark) */
  --bg: #FFFFFF;          /* Pure White page */
  --bg-2: #F4F4F5;        /* Panel */
  --ink: #0A0A0B;         /* Jet Black — primary text */
  --ink-dim: #55555A;     /* dim — secondary text */
  --ink-faint: #8A8A90;   /* faint — tertiary */
  --line: rgba(10,10,11,0.14);
  --line-strong: rgba(10,10,11,0.30);
  --graphite: #E4E4E7;    /* Border / divider variant */
  --panel: #FFFFFF;       /* card background */
  --panel-2: #FAFAFA;     /* alt card background */
  --panel-3: #F4F4F5;     /* solid mock panel */
  --panel-hover: #F1F1F3; /* card hover */
  --hairline: rgba(10,10,11,0.07);

  /* LAMBO PALETTE — lime is the body, purple is the splitter */
  /* ======== HET PALET ========
     Drie kleuren met elk één betekenis, zodat je nooit hoeft te raden wat
     een kleur wil zeggen:

       goud   positief — accentwoorden, labels, knoppen, voortgang. Goud
              is wat je wint.
       rood   negatief — prijzen (wat het je kost), uitverkocht, niet
              beschikbaar, waarschuwingen, en het Trojan-niveau. Rood
              betekent in de sheets ook verlies; dat loopt nu door.

     Staal is geen kleur in dit palet maar een materiaal: het zit alleen in
     /merk.css, voor het woordmerk en de tegeltitels.

     Paars is weg: het had geen betekenis en vocht met het rood. Donkerrood
     is er ook uit — na deze indeling bleef er geen rol voor over. */
  --goud: #E8B13C;          /* positief, op donker */
  --goud-diep: #8A5F0F;     /* positief, op wit */
  --rood: #FF3131;          /* negatief, op donker */
  --rood-diep: #A81616;     /* negatief, op wit */
  /* Een prijs is geen van beide: niet iets wat je wint en niet iets wat
     misgaat, gewoon een feit. Daarom neutraal staal, zodat goud en rood
     allebei hun ene betekenis houden. */
  --prijs: #D8D2CC;           /* prijzen op donker */
  --prijs-diep: #4A4742;      /* prijzen op wit */

  --accent: var(--goud-diep);
  --accent-rgb: 138,95,15;
  --accent-soft: rgba(138,95,15,0.10);
  --accent-glow: rgba(138,95,15,0.26);

  /* Typography — TBD brand fonts */
  --display: 'Archivo', 'Inter', sans-serif;                    /* headlines (use font-weight 900 for Black) */
  --display-alt: 'Bebas Neue', 'Archivo', sans-serif;           /* tall condensed statements */
  --sans: 'Archivo', 'Inter', system-ui, sans-serif;            /* body */
  --mono: 'Space Mono', 'IBM Plex Mono', monospace;             /* labels, slogan, captions */
  --serif: 'Archivo', 'Inter', sans-serif;                      /* legacy alias — maps to sans */
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
/* overflow-x: hidden was removed here: it turns html/body into a scroll
   container, which makes .hero-wrap's position:sticky stick to them instead
   of to the viewport — the pinned hero silently stops working. The page is
   measured to have no horizontal overflow, so the clamp is not needed. */
html, body{ background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
/* ===== ZONE SYSTEM — flip theme per section ===== */
.zone-dark{
  --bg: #0A0A0B; --bg-2: #101012;
  --ink: #FFFFFF; --ink-dim: #9A9A9E; --ink-faint: #5A5A5E;
  --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.18);
  --graphite: #1C1C20;
  --panel: #101114; --panel-2: #141519;
  --panel-3: #0a0a0a; --panel-hover: #191b20;
  --hairline: rgba(255,255,255,0.045);
  --accent: var(--goud);
  --accent-rgb: 232,177,60;
  --accent-soft: rgba(232,177,60,0.12);
  --accent-glow: rgba(232,177,60,0.30);
  background: #0A0A0B; color: #FFFFFF;
}
/* Card definition on the white base (light zones only) */
.tier, .hud, .why-block, .email-block, .raw-block{
  box-shadow: 0 1px 2px rgba(10,10,11,0.05), 0 10px 30px rgba(10,10,11,0.06);
}
.zone-dark .tier, .zone-dark.tier, .zone-dark .hud, .zone-dark .why-block{ box-shadow: none; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }