/* adapter-doorwerk.css: DoorWerk's own role and component names pointed at the fleet roles (U2 P1, ux-builder, 2026-11-02).
   Load order: page inline <style> -> fleet-web-tokens.css -> brand-doorwerk.css -> this file.
   No raw colour, size or duration here: every value is a fleet role, a DoorWerk scale token or a relative-colour step from one.
   One edit to a layer-1 input (brand-doorwerk.css or fleet-web-tokens.css) moves every rule below.
   Re-proof 2026-11-02 (review BACK, fixes F1-F4; DESIGN.md §5 row 09_SURFACE §4 as amended by PS-5):
   F1 depth = rule line + lightness step + tinted top edge + tinted e0-e3 only on raised/interactive surfaces;
   F2 scope = colour roles, elevation, button states, table tokens, motion. Type (--t-*), space (--ruimte-*), --ritme,
      radius and font stay DoorWerk's own (DESIGN.md frontmatter `scales`): those mappings are removed;
   F3 phones: a section h2 never renders below 1.2x its lede (h2 floor = --t-kop2);
   F4 every button state is defined and visibly distinct (rest, hover, press, focus-visible, disabled). */

/* ---- colour roles: DoorWerk vars -> fleet roles (3 colours: tinted neutral, bone primary, brass accent) ---- */
:root {
  --ink: var(--background); --ink-2: var(--card); --ink-3: var(--n-4);
  --text: var(--foreground);
  --bg: var(--background); --fg: var(--foreground);
  --surface: var(--card); --surface-2: var(--n-4);           /* card n-3 on ground n-1; hover and panels one step up */
  --surface-raised: var(--card-raised);
  --fg-muted: var(--muted-foreground);                      /* DoorWerk --muted was a text colour; fleet --muted is a ground: map the role, not the name */
  --fg-faint: oklch(from var(--muted-foreground) calc(l - .08) c h);
  --faint: var(--fg-faint);
  --hair: var(--n-5); --line: var(--hair);
  --hair-2: var(--border); --line-2: var(--hair-2);
  --field-line: var(--n-9); --line-field: var(--field-line);
  --gold: var(--accent);
  --gold-soft: oklch(from var(--accent) l c h / .13); --accent-soft: var(--gold-soft);
  --btn: var(--primary); --btn-ink: var(--primary-foreground);
  /* --go and --loss stay DoorWerk's: status colours, outside the 3-colour budget */

  /* ---- motion: durations x --motion (0 under reduced motion); film tokens untouched ---- */
  --duur-1: var(--dur-press); --duur-2: var(--dur-pop); --duur-3: var(--dur-route); --duur-4: var(--dur-route);
  --soepel-uit: var(--ease-out); --soepel-in: var(--ease-in); --soepel-inuit: var(--ease-in-out);
}

/* ---- F1 elevation (DESIGN.md §5 09_SURFACE §4) ---- */
/* e0: static cards and tables: lightness step + tinted top edge, no shadow */
.kaart, .cijferkaart, .zekerheden, .capaciteitsmaat, .keerpunt, .tabelwrap, .volg, .taak {
  box-shadow: var(--surface-edge, 0 0 #0000), var(--e0, 0 0 #0000);
}
/* e2: the surfaces that carry the ask, one lightness step above the cards */
.offerbox, .herostart, .demo {
  background: var(--surface-raised);
  box-shadow: var(--surface-edge, 0 0 #0000), var(--e2);
}
/* interactive cards: e2 + 2px lift on hover */
.volg, .taak {
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.volg:hover, .taak:hover { box-shadow: var(--surface-edge, 0 0 #0000), var(--e2); transform: translateY(-2px); }
/* e3: overlays */
.navpanel, .navdrop { box-shadow: var(--surface-edge, 0 0 #0000), var(--e3); }

/* ---- F4 buttons: rest / hover / press / focus-visible / disabled, all from roles ---- */
/* primary (.btn, .navprimary): inner top light + e1 at rest; tinted hover (lightness + hue) + e2; spring press, flat */
.btn, .navprimary {
  box-shadow: inset 0 1px 0 var(--primary-edge), var(--e1);
  transition: background-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-spring);
}
.btn:hover, .navprimary:hover { filter: none; background: var(--primary-hover); box-shadow: inset 0 1px 0 var(--primary-edge), var(--e2); }
.btn:active, .navprimary:active { background: var(--primary-active); transform: scale(.97); box-shadow: var(--e0, 0 0 #0000); }
/* secondary (.btn.ghost, .dbtn): outline at rest, tinted ground on hover, deeper ground + spring on press */
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { background: var(--secondary-hover); border-color: var(--foreground); box-shadow: none; }
.btn.ghost:active { background: var(--secondary-active); }
.dbtn { transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-spring); }
.dbtn:hover { background: var(--secondary-hover); }
.dbtn:active { background: var(--secondary-active); transform: scale(.97); }
/* focus-visible: the brass ring stays (DESIGN.md §5), drawn outside the button so it never hides the label */
.btn:focus-visible, .navprimary:focus-visible, .dbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* disabled: muted ground, low text, no shadow, no lift; [aria-disabled] keeps the source's progress cursor (busy state) */
.btn[disabled], .btn[aria-disabled="true"], .navprimary[disabled], .navprimary[aria-disabled="true"], .dbtn[disabled], .dbtn[aria-disabled="true"],
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover, .dbtn[disabled]:hover, .dbtn[aria-disabled="true"]:hover {
  background: var(--muted); color: var(--n-8); border-color: var(--hair); box-shadow: none; filter: none; opacity: 1; transform: none;
}
.btn[disabled], .dbtn[disabled], .navprimary[disabled] { cursor: not-allowed; }

/* ---- F3 phones: section heads stay above their lede (h2 >= 1.2x lede; DoorWerk's own --t-kop2, no new size) ---- */
@media (max-width: 767px) {
  h2 { font-size: var(--t-kop2); }
}

/* ---- tables: quiet head ground, tabular figures, row hover ---- */
table.tabel { font-variant-numeric: var(--table-num); }
table.tabel th { background: var(--table-head-bg); }
table.tabel tbody tr { transition: background-color var(--dur-hover) var(--ease-out); }
table.tabel tbody tr:hover { background: var(--table-row-hover); }

/* ---- R2 (blind re-review 2, item 9): proof figures right-aligned on one tabular baseline; place values line up across cells ---- */
.metrics .metric { text-align: end; padding-inline: var(--ruimte-4) var(--ruimte-6); }
.metrics .metric:first-child { padding-inline-start: 0; }
.metrics .metric:last-child { padding-inline-end: 0; }
.metrics .metric strong { font-variant-numeric: var(--table-num); }