/* GRiDS UI: ontwerptokens (--g-*). Licht en donker, plus white-label per merk.
 * Bron van de kleuren: docs/ARCHITECTUUR.md §10. Alle teksttokens halen WCAG AA op hun vlak.
 * Thema: <html data-theme="licht|donker"> (zonder attribuut: het apparaat).
 * Merk:  <html data-merk="grids|...">.
 */

/* Lettertypes (lokaal meegeleverd, SIL OFL 1.1; zie fonts/OFL-*.txt). */
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('./fonts/source-sans-3-latin-wght-normal.woff2') 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: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('./fonts/source-sans-3-latin-ext-wght-normal.woff2') 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;
}
@font-face {
  font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url('./fonts/source-sans-3-latin-wght-italic.woff2') 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: 'Source Code Pro'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('./fonts/source-code-pro-latin-wght-normal.woff2') 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;
}

:root {
  color-scheme: light;

  /* Merk */
  --g-merk: #152A40;            /* marineblauw: zijbalk, hoofdknoppen, titels */
  --g-merk-hover: #0F1D2D;
  --g-merk-licht: #204163;
  --g-merk-zacht: #E8EDF3;
  --g-accent: #BB0303;          /* het enige felle accent: actieve navigatie, logo, één hoofdactie */
  --g-accent-zacht: #FBEAEA;
  --g-teal: #0C6980;            /* verwijzingen en selectie in data */
  --g-teal-sterk: #08566A;
  --g-teal-zacht: #E3F1F4;
  --g-teal-rand: #9BCAD5;
  --g-viewer-selectie: #14B8D9;  /* selectie in 3D: feller dan de datakleur, zodat hij tussen grijze vlakken opvalt */
  --g-viewer-zweef: #7CC9D8;

  /* Vlakken en lijnen */
  --g-achtergrond: #F6F8F9;
  --g-vlak: #FFFFFF;
  --g-vlak-2: #F3F5F7;          /* zweef, kop van tabel */
  --g-vlak-3: #EBEEF1;          /* ingedrukt, skelet */
  --g-vlak-hoog: #FFFFFF;       /* zwevende lagen: palet, menu, zijpaneel */
  --g-lijn: #DEE1E3;
  --g-lijn-zacht: #EBEDEF;
  --g-lijn-sterk: #C2C8CC;

  /* Tekst */
  --g-tekst: #14202E;
  --g-tekst-2: #45576A;
  --g-tekst-3: #5F7183;         /* 4.7:1 op wit */
  --g-tekst-op-merk: #FFFFFF;
  --g-link: var(--g-teal);

  /* Status (vlak, tekst, zacht) */
  --g-goed: #2E8B57;   --g-goed-tekst: #226B43;   --g-goed-zacht: #E6F4EC;
  --g-letop: #B7791F;  --g-letop-tekst: #85570F;  --g-letop-zacht: #FBF1E0;
  --g-fout: #D23B4E;   --g-fout-tekst: #B02A3C;   --g-fout-zacht: #FCE9EC;
  --g-info: #0C6980;   --g-info-tekst: #0A5A6E;   --g-info-zacht: #E3F1F4;

  /* Zijbalk (altijd donker marine, ook in licht thema) */
  --g-zijbalk: #152A40;
  --g-zijbalk-rand: #1E3752;
  --g-zijbalk-tekst: #C3CEDA;
  --g-zijbalk-tekst-2: #8A9DB1;
  --g-zijbalk-zweef: rgba(255, 255, 255, 0.07);
  --g-zijbalk-actief: rgba(255, 255, 255, 0.11);

  /* Graph-soorten (§6.1) */
  --g-soort-project: #152A40;
  --g-soort-model: #3B6EA8;
  --g-soort-gebouw: #6B5CA5;
  --g-soort-verdieping: #8E6CB8;
  --g-soort-ruimte: #B07CC6;
  --g-soort-object: #0C6980;
  --g-soort-pset: #7A8B99;
  --g-soort-classificatie: #B7791F;
  --g-soort-dataset: #2E8B57;
  --g-soort-taak: #BB0303;

  /* Reeks voor grafieken (rustig, onderscheidbaar, AA als vlak met witte tekst niet nodig) */
  --g-reeks-1: #1F4E79;
  --g-reeks-2: #0C6980;
  --g-reeks-3: #4E8F6B;
  --g-reeks-4: #B7791F;
  --g-reeks-5: #8E6CB8;
  --g-reeks-6: #C2554F;
  --g-reeks-7: #5B7C99;
  --g-reeks-8: #9AA9B6;

  /* Typografie */
  --g-font: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --g-mono: 'Source Code Pro', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --g-f-2xs: 10.5px;
  --g-f-xs: 11.5px;
  --g-f-sm: 12.5px;
  --g-f-md: 13.5px;
  --g-f-base: 14px;
  --g-f-lg: 16px;
  --g-f-xl: 19px;
  --g-f-2xl: 24px;
  --g-f-3xl: 30px;
  --g-regel: 1.45;

  /* Ruimte */
  --g-r-1: 4px;  --g-r-2: 8px;  --g-r-3: 12px;  --g-r-4: 16px;
  --g-r-5: 20px; --g-r-6: 24px; --g-r-8: 32px;  --g-r-10: 40px;

  /* Vorm */
  --g-hoek-s: 5px;
  --g-hoek: 7px;
  --g-hoek-l: 10px;
  --g-hoek-xl: 14px;
  --g-schaduw-1: 0 1px 2px rgba(16, 32, 48, 0.06);
  --g-schaduw-2: 0 1px 2px rgba(16, 32, 48, 0.05), 0 4px 12px rgba(16, 32, 48, 0.06);
  --g-schaduw-3: 0 2px 6px rgba(16, 32, 48, 0.08), 0 16px 40px rgba(16, 32, 48, 0.16);
  --g-focus: 0 0 0 2px var(--g-vlak), 0 0 0 4px var(--g-teal);

  /* Maten van de schil */
  --g-bovenbalk-h: 52px;
  --g-zijbalk-b: 232px;
  --g-zijbalk-b-dicht: 60px;
  --g-rij-h: 32px;
  --g-leja-b: 400px;

  /* Beweging */
  --g-snel: 120ms;
  --g-middel: 200ms;
  --g-curve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Donker: expliciet gekozen */
:root[data-theme='donker'] {
  --g-viewer-selectie: #3FD3EE;
  --g-viewer-zweef: #2E8FA3;
  color-scheme: dark;
  --g-merk: #4A7FB5;
  --g-merk-hover: #5B8EC3;
  --g-merk-licht: #6E9CCB;
  --g-merk-zacht: #18283A;
  --g-accent: #E5484D;
  --g-accent-zacht: #3A1719;
  --g-teal: #3EB0C8;
  --g-teal-sterk: #6CCBDE;
  --g-teal-zacht: #0F2E37;
  --g-teal-rand: #1F5866;

  --g-achtergrond: #0A121B;
  --g-vlak: #0F1A25;
  --g-vlak-2: #15222F;
  --g-vlak-3: #1B2B3B;
  --g-vlak-hoog: #142130;
  --g-lijn: #213245;
  --g-lijn-zacht: #1A2938;
  --g-lijn-sterk: #31475E;

  --g-tekst: #E3E9EF;
  --g-tekst-2: #AEBBC8;
  --g-tekst-3: #8B9AAA;
  --g-tekst-op-merk: #FFFFFF;

  --g-goed: #3FAE72;   --g-goed-tekst: #6CCB96;   --g-goed-zacht: #12291D;
  --g-letop: #D79A3A;  --g-letop-tekst: #E8B565;  --g-letop-zacht: #2E2312;
  --g-fout: #E5566A;   --g-fout-tekst: #F08494;   --g-fout-zacht: #33151B;
  --g-info: #3EB0C8;   --g-info-tekst: #6CCBDE;   --g-info-zacht: #0F2E37;

  --g-zijbalk: #08101A;
  --g-zijbalk-rand: #16222F;
  --g-zijbalk-tekst: #B9C6D3;
  --g-zijbalk-tekst-2: #7F92A6;

  --g-soort-project: #8FB3D9;
  --g-soort-model: #5B8EC3;
  --g-soort-object: #3EB0C8;
  --g-soort-pset: #8B9AAA;

  --g-reeks-1: #5B8EC3;
  --g-reeks-2: #3EB0C8;
  --g-reeks-3: #5DBB8A;
  --g-reeks-4: #D79A3A;
  --g-reeks-5: #A68BD0;
  --g-reeks-6: #E07A73;
  --g-reeks-7: #7F9BB6;
  --g-reeks-8: #4A5B6C;

  --g-schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --g-schaduw-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.3);
  --g-schaduw-3: 0 2px 8px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5);
}

/* Donker: het apparaat (alleen zonder expliciete keuze) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --g-merk: #4A7FB5; --g-merk-hover: #5B8EC3; --g-merk-licht: #6E9CCB; --g-merk-zacht: #18283A;
    --g-accent: #E5484D; --g-accent-zacht: #3A1719;
    --g-teal: #3EB0C8; --g-teal-sterk: #6CCBDE; --g-teal-zacht: #0F2E37; --g-teal-rand: #1F5866;
    --g-achtergrond: #0A121B; --g-vlak: #0F1A25; --g-vlak-2: #15222F; --g-vlak-3: #1B2B3B; --g-vlak-hoog: #142130;
    --g-lijn: #213245; --g-lijn-zacht: #1A2938; --g-lijn-sterk: #31475E;
    --g-tekst: #E3E9EF; --g-tekst-2: #AEBBC8; --g-tekst-3: #8B9AAA;
    --g-goed: #3FAE72; --g-goed-tekst: #6CCB96; --g-goed-zacht: #12291D;
    --g-letop: #D79A3A; --g-letop-tekst: #E8B565; --g-letop-zacht: #2E2312;
    --g-fout: #E5566A; --g-fout-tekst: #F08494; --g-fout-zacht: #33151B;
    --g-info: #3EB0C8; --g-info-tekst: #6CCBDE; --g-info-zacht: #0F2E37;
    --g-zijbalk: #08101A; --g-zijbalk-rand: #16222F; --g-zijbalk-tekst: #B9C6D3; --g-zijbalk-tekst-2: #7F92A6;
    --g-soort-project: #8FB3D9; --g-soort-model: #5B8EC3; --g-soort-object: #3EB0C8; --g-soort-pset: #8B9AAA;
    --g-reeks-1: #5B8EC3; --g-reeks-2: #3EB0C8; --g-reeks-3: #5DBB8A; --g-reeks-4: #D79A3A;
    --g-reeks-5: #A68BD0; --g-reeks-6: #E07A73; --g-reeks-7: #7F9BB6; --g-reeks-8: #4A5B6C;
    --g-schaduw-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --g-schaduw-2: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.3);
    --g-schaduw-3: 0 2px 8px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5);
  }
}

/* White-label: een klein tokenblok per merk. Voorbeeld met een blauwe huisstijl. */
:root[data-merk='voorbeeld-blauw'] {
  --g-merk: #0073AC;
  --g-merk-hover: #005B88;
  --g-merk-licht: #1A8BC2;
  --g-zijbalk: #0B3A57;
}

@media (prefers-reduced-motion: reduce) {
  :root { --g-snel: 0ms; --g-middel: 0ms; }
}