/* ============================================================
   Offertekeuring — Landing (verbatim-conversie van de Claude
   Design-export). De export werkt met inline-styles die naar
   deze --ok-* tokens verwijzen; dit bestand levert exact die
   tokenlaag + de globale regels uit de export-<helmet>.
   Fonts zijn zelf-gehost (ds/fonts.css), dus de @font-face- en
   bundler-referenties uit de export zijn hier weggelaten.
   Alleen geladen op de landing → body/html-regels zijn veilig.
   ============================================================ */

:root {
  /* ---- Laag 2 — merk / chrome ---- */
  --ok-ground:          #FCFBF9;
  --ok-tint:            #ECEEF1;
  --ok-surface-card:    #FFFFFF;
  --ok-surface-sunken:  #FCFBF9;
  --ok-footer:          #F4F4F2;

  --ok-ink:             #23211E;
  --ok-ink-2:           #33312D;
  --ok-text-secondary:  #56524C;
  --ok-text-muted:      #6E6C67;
  --ok-text-faint:      #8C8B86;
  --ok-text-ghost:      #A8A69F;

  --ok-line:            #ECE8E1;
  --ok-line-strong:     #E5E0D8;
  --ok-line-faint:      #F2EEE7;
  --ok-line-on-accent:  rgba(255,255,255,.55);

  --ok-accent:          #27496B;
  --ok-accent-hover:    #1F3A56;
  --ok-accent-tint:     rgba(39, 73, 107, 0.07);
  --ok-mono-value:      #7C7A74;

  /* ---- Laag 1 — status (gereserveerd) ---- */
  --ok-tier-good:        #2E6A45;
  --ok-tier-good-bg:     #ECF2ED;
  --ok-tier-good-border: #C9DECF;
  --ok-tier-watch:        #855512;
  --ok-tier-watch-bg:     #F6EEDC;
  --ok-tier-watch-border: #E5D2A6;
  --ok-tier-risk:        #A8413B;
  --ok-tier-risk-bg:     #F7E7E5;
  --ok-tier-risk-border: #E8C9C5;
  --ok-tier-none:        #6C6A65;
  --ok-tier-none-bg:     #F1EEE8;
  --ok-tier-none-border: #DED8CF;

  --ok-disabled-fg:      #B5B2AB;
}

/* ---- Globale regels uit de export-<helmet> ---- */
body.landing { margin: 0; background: #FCFBF9; color: var(--ok-ink, #23211E);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.landing a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* style-hover uit de DC-export → CSS-equivalenten (alleen op de landing) */
.landing .lx-nav a:hover,
.landing .lx-textlink:hover { color: var(--ok-accent); }
.landing .lx-textlink:hover { border-bottom-color: var(--ok-accent); }
.landing .lx-dropzone:hover { border-color: var(--ok-accent); background: #fff; }
.landing .lx-btn--primary:hover { background: var(--ok-accent-hover); border-color: var(--ok-accent-hover); }
.landing .lx-btn--secondary:hover { border-color: var(--ok-accent); color: var(--ok-accent); }
.landing .lx-ander:hover { color: var(--ok-accent); }
.landing .lx-foot-link:hover { color: var(--ok-accent); }

/* B1-showcase-kaart (verbatim uit de v3-export: `.bk`) — uitklap-chevron + focus */
.landing .bk-chev { transition: transform .22s cubic-bezier(.4,0,.2,1); }
.landing details.bk[open] > summary .bk-chev { transform: rotate(180deg); }
.landing .bk-sum::-webkit-details-marker { display: none; }
.landing .bk-sum:focus-visible { outline: 2px solid #27496B; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .landing .bk-chev { transition: none; } }

/* de export-secties zijn full-bleed; main mag niets beperken */
.landing .ok-main { max-width: none; padding: 0; margin: 0; }

/* visueel-verborgen file-input */
.lx-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }