/* ============================================================
   Lijndraad — base.css
   Craft floor. Bevat GEEN merkwaarden. Kopieer dit bestand,
   bewerk het niet: wijzigingen horen in de skill, niet in het project.
   Distributie via bin/sync.mjs, drift gecontroleerd door de gate (S1).

   Link direct na contract.css en brands/<merk>/tokens.css.
   Lost D3 (decks onbruikbaar op telefoon), D4 (focus-visible ontbreekt
   in 8 van circa 300 bestanden), D5 (reduced-motion ontbreekt in
   6 bestanden) en D6 (geen dialog-primitive) structureel op.
   ============================================================ */

/* 1. Focus. Nu aanwezig in 8 van circa 300 bestanden. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring, var(--fg, CanvasText));
  outline-offset: 2px;
  border-radius: inherit;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* 2. Reduced motion als globale killswitch, niet als per-animatie opt-in.
   De 800 regels van de productie-styles.css van Top Match hebben hier nul. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] { display: none; }
}

/* 3. Deck-ontsnapping op telefoon. Klassen bevestigd op de eigen schijf:
   .slide/.slide-grid (Top Match), .grid-2/.grid-3/.grid-4 (The D Company,
   Babcock/AFS). !important is bewust: het moet het per-deck <style>-blok
   verslaan dat vandaag vaste aspect-ratio en px-koppen zet. */
@media (max-width: 900px) {
  .slide {
    aspect-ratio: auto !important;
    height: auto;
    min-height: 100svh;
    transform: none !important;
    padding: var(--slide-pad-mobile, var(--space-5, 24px));
  }
  .slide h1 { font-size: clamp(32px, 9vw, 64px); line-height: 1.05; }
  .slide h2 { font-size: clamp(26px, 7vw, 44px); }
  .slide p, .slide li { font-size: clamp(16px, 4.2vw, 20px); }
  .slide-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

/* 4. Dark mode: alleen semantische remap. Het merkpalet blijft per klant
   gedefinieerd in brands/<slug>/tokens.css via *-dark varianten; ontbreken
   die, dan blijft het licht (val terug op --bg zelf). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      var(--bg-dark, var(--bg));
    --fg:      var(--fg-dark, var(--fg));
    --bg-soft: var(--bg-soft-dark, var(--bg-soft));
    --border:  var(--border-dark, var(--border));
  }
}
:root[data-theme="dark"] {
  --bg:      var(--bg-dark, var(--bg));
  --fg:      var(--fg-dark, var(--fg));
  --bg-soft: var(--bg-soft-dark, var(--bg-soft));
  --border:  var(--border-dark, var(--border));
}

/* 5. Browsersurfaces: goedkoop signaal dat een pagina gebouwd is, niet
   samengeraapt. Craft-floor-principe, algemeen toepasbaar. */
::selection { background: var(--accent, Highlight); color: var(--accent-ink, #fff); }
:root { caret-color: var(--accent, currentColor); accent-color: var(--accent, auto); }
:where(table) { font-variant-numeric: tabular-nums; }

/* 6. Print. */
@media print {
  nav, .no-print, .deck-controls { display: none !important; }
  .slide { break-after: page; aspect-ratio: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}