/*
 * Tokenwoordenschat en thema's.
 *
 * Drie lagen, en de derde is de reden dat dit werkt:
 *
 *  1. Een thema pint waarden. Geroezemoes is de huisstijl en staat hieronder
 *     in :root: papier, inkt, en de harde schaduw zonder blur die de stijl
 *     herkenbaar maakt.
 *  2. Een thema mag in plaats daarvan afleiden. Het platformthema
 *     ([data-thema="platform"], de oude donkere stijl) zet drie kleuren en laat
 *     de rest met color-mix() volgen uit canvas <-> ink. Dat is geen restant
 *     maar de white-labelfunctie: een bureau kiest drie kleuren en krijgt een
 *     samenhangend geheel.
 *  3. Op-beeld staat buiten het thema. Chrome die over een foto ligt is donker
 *     omdat de foto dat dicteert, niet omdat het merk donker is. Die tokens
 *     veranderen dus niet mee met het thema.
 *
 * Tokennamen zijn gelijk aan die van de social manager waar ze overlappen
 * (daar: src/app/globals.css), zodat beide apps dezelfde woordenschat spreken.
 * --color-ink betekent in allebei "de voorgrondkleur, waarmee je schrijft":
 * donker op papier, licht op antraciet.
 */

:root {
    /* ── Merkkleuren: absoluut, in elk thema hetzelfde ───────────── */
    --color-lime: #ceff00;
    --color-framboos: #ff2247;

    /* ── Geroezemoes: het standaardthema, letterlijk gepind ──────── */
    --color-canvas: #f2f1ea;    /* papier, geen wit */
    --color-surface: #ffffff;   /* kaarten, panelen */
    --color-surface-2: #eceae1; /* geneste vlakken, gestreepte rijen */
    --color-ink: #141414;       /* voorgrond: tekst, koppen, rand, schaduw */
    --color-antraciet: #373737;
    --color-muted: #5f5f58;
    --color-faint: #8a867e;
    --color-line: #d9d7cd;
    --color-line-strong: #c4c1b4;

    --accent: var(--color-framboos);
    --color-accent-ink: #ffffff;
    --mark: var(--color-lime);
    --color-danger: #ff2247;
    --color-warn: #e6a15c;

    /* Gevaar- en waarschuwingstekst: dezelfde kleur, richting de voorgrond
       gemengd zodat hij in élk thema leesbaar blijft. Op papier wordt het
       donkerder, op een donkere grond lichter — één regel, beide goed. */
    --color-danger-ink: color-mix(in srgb, var(--color-danger), var(--color-ink) 35%);
    --color-warn-ink: color-mix(in srgb, var(--color-warn), var(--color-ink) 35%);

    /* ── Vorm: één schaal, geen negen ────────────────────────────── */
    --radius-pill: 999px;
    --radius: 14px;
    --radius-sm: 6px;

    /* De rand is een thema-eigenschap: dikte én kleur. In de huisstijl is hij
       massief inkt; een thema dat die taal niet spreekt zet er een fijne lijn
       neer. Afwijken per component is een fout, per thema niet. */
    --edge: 3px;
    --color-edge: var(--color-ink);

    /* ── De handtekening: massief, blur 0. Mag nergens verzachten
         tot een vage grijze gloed. Gelijke offsets, want in een scherm
         vol uitgelijnde rijen leest een scheve schaduw als een fout. ── */
    --shadow-hard-sm: 3px 3px 0 var(--color-ink);
    --shadow-hard: 5px 5px 0 var(--color-ink);
    --shadow-hard-lg: 8px 8px 0 var(--color-ink);
    --shadow-hard-ingedrukt: 1px 1px 0 var(--color-ink);

    /* ── Typografie ──────────────────────────────────────────────
         Koppen staan als token los van de waarde: zodra de licentie van
         de huisletter rond is, is dat hier één regel. Lopende tekst is
         Lato en niet de display-letter: een scherm vol labels en tabellen
         leest daar slechter door. Zelf gehost, want deze app doet geen
         externe verzoeken en klantgalerijen horen niet bij Google aan te
         kloppen. */
    --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Reign", "Space Grotesk", "Segoe UI", var(--font-sans);

    /* ── Op-beeld: thema-onafhankelijk ───────────────────────────── */
    --op-beeld-ink: #ffffff;
    --op-beeld-knop: rgba(0, 0, 0, .45);
    --op-beeld-badge: rgba(0, 0, 0, .55);
    --op-beeld-paneel: rgba(0, 0, 0, .72);
    --op-beeld-scrim: rgba(4, 4, 6, .9);
    --op-beeld-grond: #000000;
    --op-beeld-lijn: rgba(255, 255, 255, .5);
    --op-beeld-lijn-zacht: rgba(255, 255, 255, .08);
    --op-beeld-ink-zacht: rgba(255, 255, 255, .85);
    --op-beeld-rand: rgba(0, 0, 0, .35);

    /* ── Aliassen naar de oude namen. Bestaande regels blijven zo
         werken tijdens de omzetting; ze verdwijnen als stap 3 klaar is. ── */
    --base: var(--color-canvas);
    --ink: var(--color-ink);
    --surface: var(--color-surface);
    --surface-2: var(--color-surface-2);
    --line: var(--color-line);
    --line-strong: var(--color-line-strong);
    --muted: var(--color-muted);
    --faint: var(--color-faint);
    --accent-ink: var(--color-accent-ink);
    --font: var(--font-sans);
    --display: var(--font-display);
    --bg: var(--color-canvas);
}

/*
 * Het platformthema: de oude donkere stijl, nu als waardeblok.
 * Drie vrij te kiezen kleuren; de rest volgt. Een bureau dat white label
 * draait overschrijft alleen canvas/ink/accent bovenop dit blok.
 */
[data-thema="platform"] {
    --color-canvas: #14110f;
    --color-ink: #f3efe9;
    --accent: #2fb89a;
    --color-accent-ink: #00120d;

    --color-surface:   color-mix(in srgb, var(--color-canvas), var(--color-ink) 5%);
    --color-surface-2: color-mix(in srgb, var(--color-canvas), var(--color-ink) 8%);
    --color-line:        color-mix(in srgb, var(--color-canvas), var(--color-ink) 14%);
    --color-line-strong: color-mix(in srgb, var(--color-canvas), var(--color-ink) 22%);
    --color-muted: color-mix(in srgb, var(--color-ink), var(--color-canvas) 32%);
    --color-faint: color-mix(in srgb, var(--color-ink), var(--color-canvas) 42%);
    --mark: var(--accent);
    --color-danger: #ff6b6b;

    /* Deze stijl kent de harde schaduw niet; "geen schaduw" is ook een waarde.
       Een inkt-schaduw zou hier bovendien bijna-wit zijn en dus schreeuwen. */
    --shadow-hard-sm: none;
    --shadow-hard: none;
    --shadow-hard-lg: none;
    --shadow-hard-ingedrukt: none;
    --edge: 1px;
    --color-edge: var(--color-line);
    --radius: 12px;
}

/* Donkere grond binnen een licht thema: framboos leest slecht op zwart, lime wel.
   Alleen nodig wanneer het thema zelf licht is; het platformthema is al donker
   en zijn accent is daar juist op gekozen. */
html:not([data-thema="platform"]) .op-donker {
    --accent: var(--color-lime);
    --mark: var(--color-lime);
}

/* Lato: alleen 400 en 700 bestaan. Twee subsets per snede — latin en latin-ext;
   de browser haalt alleen op wat een pagina echt nodig heeft. */
@font-face {
    font-family: "Lato";
    src: url("/assets/fonts/lato-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    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: "Lato";
    src: url("/assets/fonts/lato-400-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    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: "Lato";
    src: url("/assets/fonts/lato-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    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: "Lato";
    src: url("/assets/fonts/lato-700-ext.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    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: "Reign";
    src: url("/assets/fonts/Reign-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Reign";
    src: url("/assets/fonts/Reign-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Reign";
    src: url("/assets/fonts/Reign-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("/assets/fonts/space-grotesk.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Minimale reset */
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-ink);
    line-height: 1.2;
}

a { color: var(--accent); }

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}