/*
 * Huisstijltokens van LSR.
 *
 * Overgenomen uit src/app/globals.css, waar ze in een Tailwind-@theme-blok stonden. Hier als
 * gewone CSS-variabelen, zonder bouwstap: dat is wat de bouwgids voor dit soort applicaties
 * vraagt, en het scheelt een hele toolchain om een stuk of veertig kleuren te beheren.
 *
 * Bron van waarheid blijft het Figma-bestand LSR-huisstijl---design-system, node 2:2.
 * Componenten binden aan deze variabelen, nooit aan een losse hexwaarde.
 */

:root {
    --radius-control: 8px;
    --radius-card: 16px;

    --shadow-xs: 0 1px 2px rgba(32, 48, 80, 0.06);
    --shadow-sm: 0 2px 6px rgba(32, 48, 80, 0.08);
    --shadow-md: 0 8px 20px rgba(32, 48, 80, 0.10);
    --shadow-lg: 0 18px 40px rgba(32, 48, 80, 0.14);
    --shadow-focus: 0 0 0 3px rgba(64, 112, 176, 0.35);

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

:root {
    /* Brand */
    --color-brand-navy: #014b51;
    --color-brand-navy-hover: #013539;
    /* Dezelfde kleur op tien procent dekking, als vulling van een vlak dat eruit moet springen
       zonder een melding te zijn: de hulpkaart op /portal/uitleg. Gelijk aan `bg-navy/10` in de
       Next.js-versie. Vaste waarde en geen color-mix, zodat de kleur in elke browser hetzelfde is. */
    --color-brand-navy-zacht: #e6edee;
    --color-brand-accent: #a0af71;
    --color-brand-accent-subtle: #f1f3ea;
    /* Dezelfde olijfkleur, donker genoeg om tekst van te maken. De accentkleur zelf haalt op het
      lichte accentvlak 2.11:1 waar 4.5 nodig is, en op wit 1.87:1; die is voor vlakken en randen,
      niet voor letters. Gemeten op beide achtergronden: 4.52 op het accentvlak, 5.06 op wit. */
    --color-brand-accent-text: #69734a;
    /* Dezelfde olijfkleur als vulling, net donker genoeg om er wit op te kunnen zetten: de
      accentkleur zelf haalt met wit 2.37:1 waar 4.5 nodig is, en dat is de kleur van de
      accentknop, de pagina waar je staat en de filterpil die aanstaat. Zelfde rol als
      --color-status-error-vlak bij de rode. Zo licht mogelijk gehouden om bij de huisstijl te
      blijven: 4.55:1 met wit. */
    --color-brand-accent-vlak: #707a4f;

    /* Text */
    --color-text-primary: #1a1f2b;
    --color-text-secondary: #41495a;
    --color-text-meta: #7a8699;
    /* Tekst die bedoeld is om gelezen te worden, in dezelfde bedoeling als meta maar donker genoeg.
      De metakleur is ontworpen voor grote of terloopse tekst en haalt op 14px maar 3.69:1, waar 4.5
      nodig is. Gemeten op alle drie de vlakken waar hij op ligt: wit (5.07:1), de paginakleur
      (4.77:1) en het lichte accentvlak van een ongelezen melding (4.53:1), de strengste van de
      drie. Dat laatste vlak was eerst over het hoofd gezien en zakte op 4.27:1.
      Laat --color-text-meta staan voor wat het is: randgevallen en iconen. */
    --color-text-muted: #656f7f;
    --color-text-inverse: #ffffff;

    /* Background & border */
    --color-bg-page: #f6f8fb;
    --color-bg-surface: #ffffff;
    --color-border-default: #e0e5ee;
    --color-border-strong: #c9d1de;

    /* Status.
      De -solid variant is de vlakkleur: een gevulde knop, een stip, een streep. De -text variant is
      voor tekst op de bijbehorende -bg, en is daar donkerder voor gemaakt. Ze waren eerst aan
      elkaar gelijk, en dan haalt een badge 3.00:1 waar 4.5 nodig is. Elke -text kleur is gemeten op
      zijn eigen vlak en op wit, want dezelfde kleur staat ook in een melding zonder achtergrond. */
    --color-status-success-solid: #2f9e6b;
    --color-status-success-bg: #e6f5ee;
    --color-status-success-text: #257d55;
    --color-status-warning-solid: #e0a23a;
    --color-status-warning-bg: #fbf2e1;
    --color-status-warning-text: #936713;
    --color-status-error-solid: #d64b4b;
    /* Dezelfde rode, net donker genoeg om wit erop te kunnen zetten: een gevulde knop haalde met de
      solid-kleur 4.23:1 waar 4.5 nodig is. */
    --color-status-error-vlak: #ce4848;
    --color-status-error-bg: #fbe9e9;
    --color-status-error-text: #bb4242;

    /* Avatar */
    --color-avatar-purple-bg: #eaf5fc;
    --color-avatar-purple-text: #4070b0;
    --color-avatar-teal-bg: #e6f5ee;
    --color-avatar-teal-text: #2f9e6b;
    --color-avatar-coral-bg: #fbe9e9;
    --color-avatar-coral-text: #d64b4b;
    --color-avatar-pink-bg: #fbe9e9;
    --color-avatar-pink-text: #d64b4b;
    --color-avatar-blue-bg: #eaf5fc;
    --color-avatar-blue-text: #35608f;
    --color-avatar-amber-bg: #fbf2e1;
    --color-avatar-amber-text: #9a6c14;

    /* Not yet formalized in the Foundations page, kept as local extensions */
    --color-badge-gray-bg: #f6f8fb;
    --color-field-bg: #f6f8fb;
    /* Tekst en iconen op de donkere zijbalk. Stonden als losse hex in Sidebar.tsx, toevallig gelijk
      aan de randkleuren, wat suggereerde dat het om randen ging. */
    --color-sidebar-text: #c9d1de;
    --color-sidebar-icon: #e0e5ee;

    /* Typografie: Commissioner voor koppen, Poppins voor de rest. Zo staat het in het
      Figma-bestand van de huisstijl, en zo ziet de bestaande site eruit.
      De bestanden staan in static/fonts en worden niet bij Google opgehaald: de server kan
      fonts.gstatic.com niet bereiken. Beide vallen onder de SIL Open Font License, die
      meeleveren toestaat. */
    --font-heading: Commissioner, system-ui, sans-serif;
    --font-body: Poppins, system-ui, sans-serif;

    /* ---- Legacy aliases (existing component classes reference these) ---- */
    --navy: var(--color-brand-navy);
    --navy-700: var(--color-brand-navy-hover);
    --accent: var(--color-brand-accent);
    --accent-100: var(--color-brand-accent-subtle);
    --ink: var(--color-text-primary);
    --ink-2: var(--color-text-secondary);
    --ink-3: var(--color-text-meta);
    --bg: var(--color-bg-page);
    --surface: var(--color-bg-surface);
    --border: var(--color-border-default);
    --border-strong: var(--color-border-strong);
    --green: var(--color-status-success-solid);
    --green-bg: var(--color-status-success-bg);
    --green-ink: var(--color-status-success-text);
    --amber: var(--color-status-warning-solid);
    --amber-bg: var(--color-status-warning-bg);
    --amber-ink: var(--color-status-warning-text);
    --red: var(--color-status-error-solid);
    --red-bg: var(--color-status-error-bg);
    --red-ink: var(--color-status-error-text);
    --av-purple: var(--color-avatar-purple-text);
    --av-purple-bg: var(--color-avatar-purple-bg);
    --av-coral: var(--color-avatar-coral-text);
    --av-coral-bg: var(--color-avatar-coral-bg);
    --av-pink: var(--color-avatar-pink-text);
    --av-pink-bg: var(--color-avatar-pink-bg);
    --av-blue: var(--color-avatar-blue-text);
    --av-blue-bg: var(--color-avatar-blue-bg);
    --badge-gray-bg: var(--color-badge-gray-bg);
    --field-bg: var(--color-field-bg);
}

/*
 * De fontbestanden zelf. `swap` zodat er tekst staat voordat het font binnen is: een lege kop is
 * erger dan een kop die één keer van vorm verandert.
 */
@font-face {
    font-family: Commissioner;
    src: url("/static/fonts/Commissioner-600.8c4ddafbebbf.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Commissioner;
    src: url("/static/fonts/Commissioner-700.8c4ddafbebbf.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url("/static/fonts/Poppins-400.9212f6f9860f.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url("/static/fonts/Poppins-500.a09f2fccfee3.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*
 * De standaardmarge van de browser op body eraf.
 *
 * Hier en niet in componenten.css: dat bestand doet het al, maar de publieke site laadt het niet,
 * die hangt alleen aan dit bestand en aan marketing.css. Daardoor stond er op de homepagina acht
 * pixels wit rondom, zichtbaar als een randje langs de donkere kopbalk. De Next.js-versie haalt
 * dezelfde reset uit Tailwinds preflight.
 *
 * En niet in marketing.css: dat bestand is letterlijk overgenomen uit de Next.js-versie en wordt
 * daar bijgewerkt, niet hier.
 */
body {
    margin: 0;
}