/* ============================================================================
   De huisstijl van dit OS. Drie lagen, en ze horen in deze volgorde te blijven.

   Tot 27 augustus 2026 stond hier de volledige tokenset van één klant: zijn
   kleuren, zijn huisletter, zijn namen. De template werd wel geneutraliseerd op
   klantnaam, maar niet op klantinhoud, dus elke nieuwe klant erfde het merk van
   een ander bedrijf. Dat is nu omgedraaid.

   LAAG 1  de klant. Vier regels. Dit is het enige dat per klant verschilt,
           naast assets/merk-logo.svg. De uitrol vult ze uit de onboarding.
   LAAG 2  het systeem. Neutrale grijzen, maten, vormen, beweging. Gelijk voor
           iedereen.
   LAAG 3  de oppervlakken. Wat een component gebruikt. Een component kiest
           nooit rechtstreeks uit laag 1 of 2, want dan moet hij weten of hij in
           de lichte of de donkere stand staat, en dan ontstaat er per component
           een tweede palet. Zo kwam os/cockpit.css op 124 unieke kleuren uit.
   ========================================================================= */

/* --- LAAG 1: de klant ---------------------------------------------------
   Deze kleuren bepalen elke balk: de kop van het hoofdscherm, de koppen van de
   andere bladzijden en de zijbalken. Het logo staat er wit op, dus
   assets/merk-logo.svg hoort een wit logo te zijn.

   De waarden hieronder zijn de standaard, niet de vaste waarde. Een klant
   zonder gekozen kleur ziet iets dat klopt; een klant met een kleur ziet
   zichzelf, vanaf het eerste scherm. */
:root{
  --merk-balk:#0A1628;
  --merk-balk-diep:#070C1A;
  --merk-kleur:#059669;
  --merk-contrast:#F8FAFC;
}

/* --- LAAG 2: het systeem ------------------------------------------------ */
:root{
  /* Ondergrond en vlak */
  --os-diep:#070C1A;
  --os-diep-rgb:7 12 26;
  --os-donker:#0A1628;
  --os-donker-rgb:10 22 40;
  --os-inkt:#0F172A;
  --os-inkt-rgb:15 23 42;
  --os-papier:#FFFFFF;
  --os-papier-rgb:255 255 255;
  --os-licht:#F8FAFC;
  --os-licht-rgb:248 250 252;
  --os-zacht:#F1F5F9;
  --os-rand:#E2E8F0;
  --os-rand-rgb:226 232 240;

  /* Tekst */
  --os-tekst:#0F172A;
  --os-tekst-zacht:#475569;
  --os-tekst-vaag:#64748B;
  --os-tekst-licht:#94A3B8;
  --os-tekst-licht-rgb:148 163 184;

  /* Signaal. Rood alleen bij een fout, oranje alleen bij let op. */
  --os-goed:#059669;
  --os-goed-rgb:5 150 105;
  --os-goed-licht:#34D399;
  --os-goed-licht-rgb:52 211 153;
  --os-blauw:#1965C2;
  --os-blauw-rgb:25 101 194;
  --os-let-op:#F5940D;
  --os-let-op-diep:#8A5206;
  --os-let-op-vlak:#FEF3E2;
  --os-fout:#DC2626;

  /* De merkkleuren van Google, op één plek voor het inlogmerk. */
  --os-google-rood:#EA4335;
  --os-google-blauw:#4285F4;
  --os-google-geel:#FBBC05;
  --os-google-groen:#34A853;

  /* Typografie. TT Norms is de huisletter; is hij er niet, dan Inter, dan het
     systeem. Nooit Poppins of Nunito. */
  --os-font-kop:"TT Norms Pro","TT Norms","Inter",system-ui,sans-serif;
  --os-font-tekst:"TT Norms Pro","TT Norms","Inter",system-ui,sans-serif;
  --os-font-data:"JetBrains Mono","Fira Code",monospace;
  --os-leading-strak:1.08;
  --os-leading-kop:1.15;
  --os-leading-tekst:1.65;
  --os-tracking-kop:-0.03em;
  --os-tracking-data:0.06em;

  /* Maten */
  --os-space-1:0.25rem;
  --os-space-2:0.5rem;
  --os-space-3:0.75rem;
  --os-space-4:1rem;
  --os-space-5:1.25rem;
  --os-space-6:1.5rem;
  --os-space-8:2rem;
  --os-space-10:2.5rem;
  --os-space-12:3rem;
  --os-space-16:4rem;
  --os-space-20:5rem;
  --os-space-24:6rem;
  --os-section-space:clamp(4rem, 8vw, 7rem);
  --os-page-gutter:clamp(1rem, 3vw, 2rem);
  --os-page-max:90rem;
  --os-reading-max:46rem;

  /* Vorm en diepte */
  --os-radius-xs:0.2rem;
  --os-radius-sm:0.375rem;
  --os-radius-md:0.5rem;
  --os-radius-lg:0.75rem;
  --os-radius-xl:1rem;
  --os-radius-pill:9999px;
  --os-shadow-card:0 8px 30px rgb(var(--os-inkt-rgb) / 0.08);
  --os-shadow-lift:0 16px 44px rgb(var(--os-inkt-rgb) / 0.14);

  /* Beweging. Fade en een kleine y, meer niet. Onderdelen verschijnen op hun
     definitieve plek: geen inschuiven, geen schaal, geen scheefstand. */
  --os-duration-fast:120ms;
  --os-duration-base:180ms;
  --os-ease-out:cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- LAAG 3: de oppervlakken, lichte stand ------------------------------ */
:root{
  --os-field:var(--os-licht);
  --os-field-rgb:var(--os-licht-rgb);
  --os-panel:var(--os-papier);
  --os-panel-rgb:var(--os-papier-rgb);
  --os-raised:var(--os-zacht);
  --os-raised-rgb:241 245 249;
  --os-line:var(--os-rand);
  --os-line-strong:rgb(var(--os-inkt-rgb) / 0.24);
  --os-text:var(--os-tekst);
  --os-text-soft:var(--os-tekst-zacht);
  --os-text-faint:var(--os-tekst-vaag);
  /* De systeemkleur, niet die van de klant. De merkkleur is puur voor de balk boven; alles
     daaronder is het systeem, en dat ziet er bij iedereen hetzelfde uit.
     Hier stond var(--merk-kleur), terwijl de donkere stand (verderop) al --os-goed-licht
     gebruikte. Twee standen die iets anders deden met dezelfde vraag: in het licht liep het
     accent mee met de klant en in het donker niet. Dat valt niemand op tot je de twee naast
     elkaar zet, en dan klopt er één van de twee niet. */
  --os-accent:var(--os-goed);
  --os-accent-soft:rgb(var(--os-goed-rgb) / 0.10);
  --os-primary-bg:var(--os-donker);
  /* Vast licht, niet var(--merk-contrast). Het primaire vlak is sinds 27 augustus vast
     navy en dus geen merkvlak meer; de inkt hoort dan ook niet met de klant mee te lopen.
     Een klant met een LICHTE balk zet --merk-contrast op donker, en dan stond hier donkere
     tekst op een donker vlak. Dezelfde fout als bij de balk, één token verderop, en net zo
     onzichtbaar tot de eerste klant die hem raakt. Alleen --os-balk-ink volgt de klant. */
  --os-primary-ink:var(--os-licht);
  /* Idem: de focusring is systeem en geen merk. Een klant met een lichtgele huisstijl zou
     anders een focusring krijgen die op wit niet te zien is, en dan kun je met een
     toetsenbord niet meer zien waar je bent. */
  --os-focus:var(--os-goed);
  /* Het vlak van een kaart. Licht: wit op een rustige ondergrond, met een
     donkere balk erboven. Donker: leeg, want een gevuld paneel maakt het scherm
     dan grijs in plaats van bijna zwart. Eén naam, twee antwoorden, zodat een
     component niet hoeft te weten waar hij staat. */
  --os-kaart:var(--os-papier);
  --os-kaart-schaduw:0 1px 2px rgb(var(--os-inkt-rgb) / 0.05), 0 8px 24px rgb(var(--os-inkt-rgb) / 0.05);
  --os-balk:var(--merk-balk);
  --os-balk-ink:var(--merk-contrast);
  --os-balk-lijn:rgb(255 255 255 / 0.22);
  --os-balk-hover:rgb(255 255 255 / 0.12);
  --os-pil-rand:rgb(var(--os-goed-licht-rgb) / 0.45);
  --os-pil-ink:var(--os-goed-licht);
  /* Het raster hoort bij de donkere stand, waar het diepte geeft aan een bijna
     zwart veld. Een lichte werkruimte heeft het niet. */
  --os-grid:transparent;
}

/* --- LAAG 3: de oppervlakken, donkere stand -----------------------------
   Let op: de donkere stand haalt zijn vlakken uit de systeemlaag, niet uit de
   klantlaag. De kleur van de klant hoort op de balk en verder nergens. Zet je
   hier --merk-balk neer, dan is bij een klant met donkerrood het hele scherm
   donkerrood, en dat valt niet op zolang de klant toevallig navy heeft. B80
   bewaakt dat. */
:root[data-theme="dark"]{
  --os-field:var(--os-diep);
  --os-field-rgb:7 12 26;
  --os-panel:var(--os-donker);
  --os-panel-rgb:10 22 40;
  --os-raised:#122744;
  --os-raised-rgb:18 39 68;
  --os-line:rgb(var(--os-tekst-licht-rgb) / 0.20);
  --os-line-strong:rgb(var(--os-tekst-licht-rgb) / 0.38);
  --os-text:var(--os-licht);
  --os-text-soft:#CBD5E1;
  --os-text-faint:var(--os-tekst-licht);
  --os-accent:var(--os-goed-licht);
  --os-accent-soft:rgb(var(--os-goed-licht-rgb) / 0.14);
  --os-primary-bg:var(--os-goed-licht);
  --os-primary-ink:var(--os-diep);
  --os-focus:var(--os-goed-licht);
  --os-kaart:transparent;
  --os-kaart-schaduw:none;
  --os-balk:var(--merk-balk);
  --os-balk-ink:var(--merk-contrast);
  --os-balk-lijn:rgb(var(--os-tekst-licht-rgb) / 0.28);
  --os-balk-hover:rgb(var(--os-tekst-licht-rgb) / 0.14);
  --os-pil-rand:rgb(var(--os-goed-licht-rgb) / 0.40);
  --os-pil-ink:var(--os-goed-licht);
  --os-grid:rgb(var(--os-tekst-licht-rgb) / 0.07);
  --os-shadow-card:0 8px 30px rgb(0 0 0 / 0.35);
  --os-shadow-lift:0 16px 44px rgb(0 0 0 / 0.45);
}