/* ===================================================================
   TOKENS -- het nieuwe binnenportaal (redesign fase 1, besluit B156)
   ===================================================================
   Letterlijk DESIGN.md §1 uit docs/redesign/design_handoff_binnenportaal/.
   "Een waarde die hier niet staat, bestaat niet": wie iets nieuws nodig
   heeft, zet het eerst in DESIGN.md en dan hier.

   Twee thema's met dezelfde namen (§1.7). Het binnenportaal zet
   data-thema="investree" op <html>; de BuitenApp houdt voorlopig zijn eigen
   opmaak. Alleen de waarden in het blok GRIB verschillen.
   =================================================================== */

/* Inter, dezelfde bestanden en adressen als in portal.css en rapport.css.
   ⚠️ Het adres met ?v=5.3.0 moet gelijk zijn aan de preload in
   templates/v2/base.html, anders haalt de browser het twee keer op. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/inter-latin-wght-normal.woff2?v=5.3.0') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-wght-normal.woff2?v=5.3.0') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Arial op de maten van Inter: staat in beeld tot Inter binnen is, zonder dat
   de tekst verspringt (DESIGN.md §1.2 noemt system-ui; Arial is overal
   hetzelfde en heeft bekende maten, system-ui niet). */
@font-face {
  font-family: 'Inter Fallback'; src: local('Arial');
  ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%;
}

:root,
:root[data-thema="investree"] {
  /* §1.1 Kleur */
  --c-primary: #0E2869;
  --c-primary-hover: #1B3A7D;
  --c-primary-soft: #E7ECF5;
  --c-primary-tint: #F3F6FB;
  --c-accent: #0F8641;
  --c-decor: #77BADB;
  --c-text: #16213B;
  --c-text-2: #4A5468;
  --c-text-3: #5B6477;
  --c-disabled: #98A2B3;
  --c-line-strong: #C3CAD6;
  --c-line: #DCE1E9;
  --c-line-soft: #EBEEF3;
  --c-canvas: #F5F7FA;
  --c-surface: #FFFFFF;

  /* §1.1 Status: tekst op een eigen achtergrond, alle combinaties >= 4,5:1 */
  --st-klaar-fg: #0B6B35;   --st-klaar-bg: #E8F4EC;
  --st-bezig-fg: #1B3A7D;   --st-bezig-bg: #E7ECF5;
  --st-wacht-fg: #A43F06;   --st-wacht-bg: #FEF0E1;
  --st-blok-fg: #B42318;    --st-blok-bg: #FDECEA;
  --st-open-fg: #4A5468;    --st-open-bg: #EEF1F5;

  /* §1.2 Typografie: maat en regelhoogte */
  --font: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --fs-1: 32px; --lh-1: 40px;
  --fs-2: 24px; --lh-2: 32px;
  --fs-3: 18px; --lh-3: 26px;
  --fs-4: 16px; --lh-4: 24px;
  --fs-5: 14px; --lh-5: 20px;
  --fs-6: 13px; --lh-6: 16px;
  --fw-regular: 400;
  --fw-semibold: 600;

  /* §1.3 Ruimte, een schaal van 4 px */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  /* De ruimte tussen twee velden, en boven een rij knoppen onder inhoud: één
     maat voor de hele app (keuze van Paul, 5 okt 2026; regels in basis.css §2). */
  --veld-afstand: var(--sp-4);

  /* §1.4 Vorm en diepte */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --shadow-overlay: 0 8px 24px rgba(14, 40, 105, .14);

  /* §1.5 Hoogte van bedieningselementen */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px;
  /* §2 Formulierveld: 44 hoog, naar het model van de BuitenApp */
  --h-veld: 44px;

  /* §3.1 App-shell */
  --menu-w: 240px;
  --menu-w-smal: 80px;
  --balk-h: 56px;
  --rand: 32px;
  --paneel-w: 400px;
  --dialoog-w: 480px;
}

/* §1.7 Thema GRIB (voorstel): dezelfde namen, andere waarden. */
:root[data-thema="grib"] {
  --c-primary: #067647;
  --c-primary-hover: #05603A;
  --c-primary-soft: #D1FADF;
  --c-accent: #12B76A;
  --c-text: #101828;
  --c-canvas: #F9FAFB;
}

/* §1.6 Breekpunten 640 · 1024 · 1440: de paginarand */
/* Met [data-thema] erbij: anders weegt het themablok hierboven zwaarder
   en komt de kleinere rand nooit aan. */
@media (max-width: 1023px) { :root, :root[data-thema] { --rand: 24px; } }
@media (max-width: 639px)  { :root, :root[data-thema] { --rand: 16px; } }

/* §1.5 Op een aanraakscherm is md 44 en valt sm weg. */
@media (pointer: coarse) { :root, :root[data-thema] { --h-md: 44px; --h-sm: 44px; } }