/* ============================================================
   DOTEC — Design System :: Colors & Type
   "The Friendly LiftAssist®"
   Import in any HTML file:
   <link rel="stylesheet" href="colors_and_type.css">
   Fonts are loaded from Google Fonts (see @import below).
   See README.md for substitution notes (Calibri→Carlito,
   VAG Rounded→Fredoka).
   ============================================================ */

/* --- Webfonts ----------------------------------------------
   Oswald / Roboto = exact (Google CDN).
   Carlito = metric-compatible Calibri substitute (Google CDN).
   VAG Rounded = self-hosted from licensed files in /fonts (see below).
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Carlito:ital,wght@0,400;0,700;1,400&display=swap');

/* --- VAG Rounded (self-hosted, licensed brand font) -------- */
@font-face {
  font-family: 'VAG Rounded';
  src: url('fonts/VAG_Rounded_Std_Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VAG Rounded';
  src: url('fonts/VRT_____.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VAG Rounded';
  src: url('fonts/VRL_____.TTF') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* "VAG Round" is the standard cut — map it to the normal/bold range */
@font-face {
  font-family: 'VAG Rounded';
  src: url('fonts/vaground.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* U1-fix (ronde 3, blind-critic): zonder color-scheme volgt de UA
     (placeholders, native <select>-popups, scrollbars, autofill) altijd
     het OS-thema, los van welk .theme-dark/.theme-light-thema de app zelf
     toont — bv. een placeholder van #757575 op een van onze donkere
     surfaces (light-UA-default) haalt lang niet 4.5:1. dark is de
     :root-default (colors_and_type.css levert DARK tokens by default,
     zie hierboven); de .theme-light-blokken (index.html/login.html/
     beheer.html) zetten 'm terug naar light zodra die klasse actief is. */
  color-scheme: dark;
  /* ---------------------------------------------------------
     CORE BRAND COLORS
     Sampled directly from the official Dotec letterhead.
     --------------------------------------------------------- */
  --dotec-yellow:        #FBCE00;   /* primary — logo brackets, CTAs, accents   */
  --dotec-yellow-bright: #FDD900;   /* hover / highlight pop                     */
  --dotec-yellow-deep:   #E0B500;   /* pressed / shadowed yellow                 */
  --dotec-green:         #45A035;   /* secondary — "friendly" script, footer rule*/
  --dotec-green-bright:  #5BB933;
  /* U1 (UX-wave 6, tools/test-contrast.js): #357A28 landed at 4.37-4.47:1 as
     TEXT on a pale green-tinted badge/pill background in light mode — just
     under the 4.5:1 floor. Darkened for headroom on every such pair. */
  --dotec-green-deep:    #2E6B21;
  --dotec-ink:           #161616;   /* near-black wordmark / text on light       */
  --dotec-black:         #000000;

  /* ---------------------------------------------------------
     NEUTRAL RAMP (cool charcoal — matches dark website)
     --------------------------------------------------------- */
  --n-0:   #FFFFFF;
  --n-25:  #F7F7F5;
  --n-50:  #EFEFEC;
  --n-100: #E2E2DE;
  --n-200: #C9C9C4;
  --n-300: #A6A6A1;
  --n-400: #7C7C77;
  --n-500: #565652;
  --n-600: #3A3A37;
  --n-700: #262625;
  --n-800: #1A1A19;
  --n-900: #111110;
  --n-950: #0A0A0A;

  /* ---------------------------------------------------------
     SEMANTIC — DARK SURFACES (website default)
     --------------------------------------------------------- */
  --bg:            var(--n-950);   /* page background          */
  --surface:       var(--n-900);   /* card / panel             */
  --surface-2:     var(--n-800);   /* raised panel             */
  --surface-3:     var(--n-700);   /* input / hover fill       */
  --hairline:      rgba(255,255,255,.10);
  --hairline-2:    rgba(255,255,255,.18);

  --fg:            #F4F4F1;         /* primary text on dark     */
  --fg-2:          #B6B6B1;         /* secondary text           */
  --fg-3:          #807F7B;         /* muted / captions         */
  --fg-on-yellow:  #161616;         /* text sitting on yellow   */
  --fg-on-green:   #FFFFFF;

  /* ---------------------------------------------------------
     SEMANTIC — LIGHT SURFACES (documents / light sections)
     --------------------------------------------------------- */
  --paper:         #FFFFFF;
  --paper-2:       var(--n-25);
  --ink:           #161616;         /* primary text on light    */
  --ink-2:         #4A4A46;
  --ink-3:         #7C7C77;
  --rule:          #DADAD5;

  /* ---------------------------------------------------------
     STATUS / FEEDBACK (used sparingly in UI)
     --------------------------------------------------------- */
  --ok:    #45A035;
  --warn:  #E8A400;
  /* U1 (UX-wave 6): darkened from #C8362B — as TEXT on a pale red-tinted
     badge/notice in light mode it landed at 4.1-4.4:1, just under 4.5:1.
     Every OTHER use (solid badge bg + white text, dots, hover borders) only
     gains contrast from a darker red, so this is a safe global change. */
  --error: #A82E20;
  --info:  #2E6FB0;
  /* U1 (UX-wave 6): --warn (#E8A400) reads fine as a background/dot/border
     indicator, but as TEXT on a pale amber-tinted badge in light mode it
     measured 1.8-2.2:1 (tools/test-contrast.js) — far under 4.5:1. Same
     "bright for dark, deep for light" split already used for green
     (--dotec-green-bright/--dotec-green-deep); reused here for amber TEXT
     only (badges/hints/pills) — background/dot/border usages of --warn are
     unaffected. Value matches the amber ink already used in the printed
     quote/datasheet (#8a6d00), so app and document agree. */
  --warn-deep: #7A5F00;

  /* ---------------------------------------------------------
     TYPE FAMILIES
     Oswald  → industrial condensed display (headings, web, marketing)
     Roboto  → web/marketing body
     Carlito → metric-compatible Calibri substitute (business documents)
     VAG Rounded → self-hosted licensed brand font (friendly rounded accents)
     --------------------------------------------------------- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Roboto', 'Arial', system-ui, sans-serif;
  --font-doc:     'Carlito', 'Calibri', 'Arial', sans-serif;   /* documents: Calibri */
  --font-rounded: 'VAG Rounded', 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------------------------------------------------------
     TYPE SCALE (marketing / web — Oswald headings)
     Condensed display runs UPPERCASE with positive tracking.
     --------------------------------------------------------- */
  --display:       clamp(44px, 6.5vw, 92px);  /* hero            */
  --h1:            clamp(34px, 4.4vw, 60px);
  --h2:            clamp(26px, 3vw, 40px);
  --h3:            22px;
  --h4:            18px;
  --eyebrow:       13px;   /* small uppercase label             */
  --body-lg:       19px;
  --body:          16px;
  --body-sm:       14px;
  --caption:       12px;

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-body:   1.6;

  --tracking-display: .01em;
  --tracking-eyebrow: .22em;
  --tracking-button:  .08em;

  /* ---------------------------------------------------------
     RADII / SHADOW / SPACING
     Industrial brand → low radii, square logo brackets.
     --------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --shadow-yellow: 0 10px 30px rgba(251,206,0,.28);
  /* U5 (UX-wave 6): één focus-ring token in plaats van dezelfde rgba() op
     vier plekken herhaald (select.nat, qfield, mini-field, txt-field) —
     zie docs/UX-WAVE-6.md. */
  --focus-ring: 0 0 0 3px rgba(251,206,0,.18);

  /* SPACING — UX-conventies ronde 2, bouwpunt 8 (audit 2, G1).
     Gemeten vóór deze ronde: `var(--sp-*)` werd 0 keer gebruikt in
     frontend/index.html; er stonden 844 rauwe px-waarden in padding/margin/
     gap, in 39 verschillende maten (8px 120×, 12px 90×, 10px 75×, 14px 64×,
     6px 56×, 9px 43×, 11px 37×, 18px 36×, 7px 25×, …), waarvan 14 van de 22
     afstanden op één configuratorscherm niet deelbaar door 4.

     De schaal hieronder is UITGEBREID, niet vervangen: --sp-1…--sp-10 houden
     exact de waarden die ze hadden (login.html en beheer.html gebruiken ze
     al, die bestanden veranderen niet mee). Er zijn HALVE stappen bij
     gekomen, zodat de ladder onder 16 px een 2 px-raster is, daarboven het
     4 px-raster van Material, en boven 64 px 16/32 px:

        2  4  6  8  10  12  14  16  20  24  28  32  40  48  56  64  80  96  120  128

     Waarom een 2 px-raster onder 16 px, en niet het kale 8 dp-raster dat
     Material voorschrijft: de app-chrome leunt op tekst van 11–14 px in een
     condensed font. Op die schaal is 8 dp te grof — het verschil tussen een
     chip met 6 px en met 8 px binnenruimte is daar het verschil tussen wel
     en niet passen. Boven 16 px, waar het om blokafstanden gaat, geldt het
     4/8-raster wél gewoon.

     Elke rauwe px-waarde in padding/margin/gap van de app-chrome is naar de
     dichtstbijzijnde sport gesnapt (211 van de 683 verschoven, allemaal met
     1–2 px op vier uitzonderingen na — zie docs/UX-CONVENTIES-RONDE-2.md).
     Het OFFERTEDOCUMENT (#quote-doc, #ds-doc, .q2-*, .qpage*, @media print)
     is bewust NIET meegesnapt: de paginator meet echte pixelhoogtes, dus
     daar zou 2 px per blok de paginaovergangen van elke bestaande offerte
     verplaatsen. */
  --sp-05: 2px;
  --sp-1:  4px;  --sp-15: 6px;   --sp-2:  8px;  --sp-25: 10px;
  --sp-3:  12px; --sp-35: 14px;  --sp-4:  16px; --sp-45: 20px;
  --sp-5:  24px; --sp-55: 28px;  --sp-6:  32px; --sp-65: 40px;
  --sp-7:  48px; --sp-75: 56px;  --sp-8:  64px; --sp-85: 80px;
  --sp-9:  96px; --sp-95: 120px; --sp-10: 128px;

  /* TYPOGRAFIE — UX-conventies ronde 2, bouwpunt 8 (audit 2, G2/F1).
     Gemeten vóór deze ronde: 34 verschillende `font-size`-declaraties in
     frontend/index.html, inclusief halve pixels (11,5px 41×, 12,5px 36×,
     13,5px 21×, 10,5px 30×, 9,5px 13×, plus 8,5px / 15,5px / 16,5px). Op
     één scherm mat de audit 18 verschillende groottes (configurator) en 20
     (offerte); Tesla's configurator: 6, met hetzelfde script gemeten.

     Zes rollen, precies de schaal die audit 2 voorstelt, plus één
     display-clamp voor de twee heldenkoppen (.cat-hero h1 / .cfg-title h1) —
     die is geen UI-rol maar het merkbeeld, en krimpen naar 32 px zou de
     startpagina zijn gezicht kosten. Geen halve pixels meer.

        --fs-1  32px   schermtitel
        --fs-2  20px   sectie-/kaartkop
        --fs-3  16px   grote body, primaire keuzetekst
        --fs-4  14px   body, knoppen, invoervelden
        --fs-5  12px   VELDLABELS (F1: labels minimaal 12 px), tabelkoppen
        --fs-6  11px   meta: badges, voetnoten, tellers

     Het offertedocument houdt zijn eigen, print-vaste schaal (pt en px die
     de A4-opmaak dragen) — zie de toelichting bij de spacing hierboven. */
  --fs-1: 32px;
  --fs-2: 20px;
  --fs-3: 16px;
  --fs-4: 14px;
  --fs-5: 12px;
  --fs-6: 11px;
  --fs-display: clamp(32px, 4.6vw, 56px);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* U1-fix (ronde 3, blind-critic): dit was tot nu toe een KALE
   ".theme-dark { ... }"-regel in frontend/index.html zelf ("de legibility
   pass die --fg-2/--fg-3 in dark optilt", zie tools/test-contrast.js) —
   login.html en beheer.html linken deze stylesheet ook, maar hadden het
   blok niet gekopieerd, dus lazen zij nog de ongeoptilde :root-waarden
   (--fg-3 #807F7B): 4.35:1 voor .notitie (login.html) en .data-teller >
   span (beheer.html, Data-tab) tegen --surface-2 (#1A1A19) — onder de
   4.5:1-vloer. Verplaatst naar hier zodat alle drie de bestanden (die alle
   drie colors_and_type.css linken en class="theme-dark" als default op
   <html> zetten) hem automatisch delen — één bron in plaats van drie
   losse kopieën. Na de verplaatsing: 6.72:1. */
.theme-dark { --fg-2: #D3D3CE; --fg-3: #A2A19B; }

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Opt-in helpers — apply on a wrapper, not globally, so the
   document and web surfaces can coexist.
   ============================================================ */

.dotec-type h1, .dotec-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.dotec-type h2, .dotec-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.dotec-type h3, .dotec-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--h3);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}
.dotec-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.dotec-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--eyebrow);
  letter-spacing: .02em;
  color: var(--dotec-yellow);
}
/* U-fix (ronde 2, critic): --dotec-yellow as TEXT on the near-white
   .theme-light surfaces (beheer.html header) measures 1.37:1 — same failure
   as .eyebrow/.cat-hero h1 .y elsewhere; same green-deep mirror. */
.theme-light .dotec-eyebrow { color: var(--dotec-green-deep); }
.dotec-type p, .dotec-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body);
  line-height: var(--lh-body);
  margin: 0;
}
.dotec-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body-lg);
  line-height: 1.5;
}

/* Document type (Calibri/Carlito) — letters, memos, invoices */
.dotec-doc {
  font-family: var(--font-doc);
  font-size: 11pt;
  line-height: 1.4;
  color: var(--ink);
}
.dotec-doc h1 { font-size: 16pt; font-weight: 700; margin: 0 0 6pt; }
.dotec-doc h2 { font-size: 12pt; font-weight: 700; margin: 0 0 4pt; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.dotec-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  letter-spacing: .02em;
  padding: 14px 26px;
  border: 0; border-radius: var(--r-sm);
  background: var(--dotec-yellow); color: var(--fg-on-yellow);
  cursor: pointer;
  transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.dotec-btn:hover { background: var(--dotec-yellow-bright); box-shadow: var(--shadow-yellow); }
.dotec-btn:active { transform: translateY(1px); background: var(--dotec-yellow-deep); }
.dotec-btn--ghost {
  background: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--hairline-2);
}
.dotec-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--dotec-yellow); color: var(--dotec-yellow); background: transparent; }
.dotec-btn--green { background: var(--dotec-green); color: var(--fg-on-green); }
.dotec-btn--green:hover { background: var(--dotec-green-bright); box-shadow: none; }

/* Logo bracket motif — wrap any text to get the [ … ] frame */
.dotec-bracket {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .04em;
}
.dotec-bracket::before, .dotec-bracket::after {
  content: ''; align-self: stretch; width: .16em;
  background: var(--dotec-yellow);
  border-radius: 1px;
}
.dotec-bracket::before { box-shadow: inset .18em 0 0 0 transparent; }

/* Kopbalk-labels op smalle schermen verbergen zodat tabs en knoppen elkaar
   niet overlappen (de knoppen zelf blijven zichtbaar, met title + aria-label).
   U3 (UX-wave 6): drempel opgetild naar 1200 — "gebruikersnaam alleen
   >=1200", zie docs/UX-WAVE-6.md.
   B3/B4 (UX-conventies ronde 1): .user-chip-naam is opgevolgd door .usr-naam
   (de naam ín de gebruikersmenuknop) en .ic-lbl (het zichtbare label naast
   het Projecten-/Instellingen-icoon). NN/g Icon Usability: "Icon labels
   should be visible at all times" — dus tekst zolang hij past, en pas
   daaronder terug naar icoon + tooltip/aria-label. Zie
   docs/UX-CONVENTIES-RONDE-1.md. Onder 768 verdwijnen de trigger-knoppen
   sowieso (index.html) en neemt het hamburger-paneel het over. */
@media (max-width: 1199px) {
  .user-chip-naam, .usr-naam { display: none; }
}
@media (max-width: 1023px) {
  .ic-btn .ic-lbl { display: none; }
}