/* ============================================================================
   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.

   De --vq-* namen onderaan zijn aliassen. Ze bestaan zodat de bestaande
   schermen blijven werken; nieuwe code gebruikt --os-*.
   ========================================================================= */

/* --- 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{
  /* P.G.C. Hajenius. Uit BRAND-GUIDE.md, jubileumversie 2026:
     rood-diep is het vlak, rood-donker de rand en de hover, goud het merkteken,
     creme de rustige achtergrond. */
  --merk-balk:#8B1A1A;
  --merk-balk-diep:#150A08;
  --merk-kleur:#C9A05C;
  --merk-contrast:#F4ECDC;

  /* De rest van het wapenpalet. Deze waarden staan ook in regels.json, waar de
     assistent zijn merkregels uit leest; ze horen op één plek hetzelfde te zijn.
     Componenten gebruiken ze niet rechtstreeks, die kiezen uit laag 3. */
  --merk-rood-donker:#5C0F0F;
  --merk-rood-helder:#B82828;
  --merk-goud-licht:#E5C16E;
  --merk-inkt:#1A1410;
  --merk-zwart-warm:#0E0907;
  --merk-grijs-warm:#6B5D4F;
  --merk-let-op:#F5940D;
  --merk-alarm:#DC2626;
}

/* --- 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);
  --os-accent:var(--merk-kleur);
  --os-accent-soft:rgb(var(--os-goed-rgb) / 0.10);
  --os-primary-bg:var(--merk-balk);
  --os-primary-ink:var(--merk-contrast);
  --os-focus:var(--merk-kleur);
  /* 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 ----------------------------- */
:root[data-theme="dark"]{
  --os-field:var(--merk-balk-diep);
  --os-field-rgb:7 12 26;
  --os-panel:var(--merk-balk);
  --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(--merk-balk-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);
}

/* --- De aliassen --------------------------------------------------------
   De schermen gebruiken nog --vq-*. Die namen komen uit de fork waar deze
   template uit is samengesteld en staan op ruim honderd plekken in
   os/cockpit.css, os/chat.css en de bladzijden. In één ronde hernoemen laat
   elke pagina tegelijk omvallen, dus ze wijzen hier naar hun opvolger.

   Nieuwe code gebruikt --os-*. Deze lijst mag alleen korter worden. */
:root, :root[data-theme="dark"]{
  --vq-forest:var(--merk-balk);
  --vq-forest-rgb:var(--os-donker-rgb);
  --vq-forest-mid:var(--merk-kleur);
  --vq-forest-mid-rgb:var(--os-goed-rgb);
  --vq-sage:var(--os-tekst-vaag);
  --vq-sage-rgb:var(--os-tekst-licht-rgb);
  --vq-sage-light:var(--os-tekst-licht);
  --vq-sage-light-rgb:var(--os-tekst-licht-rgb);
  --vq-mint:var(--os-goed-licht);
  --vq-mint-rgb:var(--os-goed-licht-rgb);
  --vq-cream:var(--os-licht);
  --vq-cream-rgb:var(--os-licht-rgb);
  --vq-sand:var(--os-rand);
  --vq-sand-rgb:var(--os-rand-rgb);
  --vq-paper:var(--os-papier);
  --vq-paper-rgb:var(--os-papier-rgb);
  --vq-charcoal:var(--os-inkt);
  --vq-charcoal-rgb:var(--os-inkt-rgb);
  --vq-body:var(--os-tekst-zacht);
  --vq-body-soft:var(--os-tekst-zacht);
  --vq-muted:var(--os-tekst-vaag);
  --vq-subtle:var(--os-tekst-licht);
  --vq-soft-surface:var(--os-zacht);
  --vq-live-surface:var(--os-zacht);
  --vq-warning:var(--os-let-op);
  --vq-warning-dark:var(--os-let-op-diep);
  --vq-warning-surface:var(--os-let-op-vlak);
  --vq-danger:var(--os-fout);
  --vq-google-red:var(--os-google-rood);
  --vq-google-blue:var(--os-google-blauw);
  --vq-google-yellow:var(--os-google-geel);
  --vq-google-green:var(--os-google-groen);
  --vq-font-display:var(--os-font-kop);
  --vq-font-body:var(--os-font-tekst);
  --vq-font-data:var(--os-font-data);
  --vq-leading-tight:var(--os-leading-strak);
  --vq-leading-heading:var(--os-leading-kop);
  --vq-leading-body:var(--os-leading-tekst);
  --vq-tracking-display:var(--os-tracking-kop);
  --vq-tracking-data:var(--os-tracking-data);
  --vq-space-1:var(--os-space-1);
  --vq-space-2:var(--os-space-2);
  --vq-space-3:var(--os-space-3);
  --vq-space-4:var(--os-space-4);
  --vq-space-5:var(--os-space-5);
  --vq-space-6:var(--os-space-6);
  --vq-space-8:var(--os-space-8);
  --vq-space-10:var(--os-space-10);
  --vq-space-12:var(--os-space-12);
  --vq-space-16:var(--os-space-16);
  --vq-space-20:var(--os-space-20);
  --vq-space-24:var(--os-space-24);
  --vq-section-space:var(--os-section-space);
  --vq-page-gutter:var(--os-page-gutter);
  --vq-page-max:var(--os-page-max);
  --vq-reading-max:var(--os-reading-max);
  --vq-radius-xs:var(--os-radius-xs);
  --vq-radius-sm:var(--os-radius-sm);
  --vq-radius-md:var(--os-radius-md);
  --vq-radius-lg:var(--os-radius-lg);
  --vq-radius-xl:var(--os-radius-xl);
  --vq-radius-pill:var(--os-radius-pill);
  --vq-shadow-card:var(--os-shadow-card);
  --vq-shadow-lift:var(--os-shadow-lift);
  --vq-duration-fast:var(--os-duration-fast);
  --vq-duration-base:var(--os-duration-base);
  --vq-ease-out:var(--os-ease-out);
  --vq-field:var(--os-field);
  --vq-field-rgb:var(--os-field-rgb);
  --vq-panel:var(--os-panel);
  --vq-panel-rgb:var(--os-panel-rgb);
  --vq-raised:var(--os-raised);
  --vq-raised-rgb:var(--os-raised-rgb);
  --vq-line:var(--os-line);
  --vq-line-strong:var(--os-line-strong);
  --vq-text:var(--os-text);
  --vq-text-soft:var(--os-text-soft);
  --vq-text-faint:var(--os-text-faint);
  --vq-accent:var(--os-accent);
  --vq-accent-soft:var(--os-accent-soft);
  --vq-primary-bg:var(--os-primary-bg);
  --vq-primary-ink:var(--os-primary-ink);
  --vq-focus:var(--os-focus);
  --vq-kaart:var(--os-kaart);
  --vq-kaart-schaduw:var(--os-kaart-schaduw);
  --vq-balk:var(--os-balk);
  --vq-balk-ink:var(--os-balk-ink);
  --vq-balk-lijn:var(--os-balk-lijn);
  --vq-balk-hover:var(--os-balk-hover);
  --vq-pil-rand:var(--os-pil-rand);
  --vq-pil-ink:var(--os-pil-ink);
  --vq-grid:var(--os-grid);
}