/*!
 * Design gebaseerd op "FLOW V.4.0 — Flexible Library for Optimised Wireframes" door Little Miss Robot
 * (Figma Community), gelicentieerd onder CC BY 4.0: https://creativecommons.org/licenses/by/4.0/
 * Gewijzigd: vertaald naar eigen CSS met aangepaste elevation, vormen, layouts en thema's.
 * Little Miss Robot is niet betrokken bij en onderschrijft dit werk niet. Zie /credits.
 */
/* =========================================================
   Thema "FLOW noir" — donkere tokens
   Laadt NA site.css en draait de neutrale schaal om, zodat elk
   bestaand primitief (knoppen, kaarten, formulieren, tags) meteen
   werkt op donker. Thema-specifieke layout staat in de andere
   bestanden in deze map; het lichte thema blijft onaangeroerd.
   ====================================================== */

:root {
    color-scheme: dark;

    /* Neutral, omgedraaid: 0 = achtergrond, 1000 = tekst. Lichte inkt-tint van FLOW behouden. */
    --n-0: #08070f;
    --n-100: #0f0e1a;
    --n-150: #151422;
    --n-200: #1f1e2e;
    --n-300: #2c2b40;
    --n-400: #4a4964;
    --n-500: #8b8aa6;
    --n-600: #aeadc4;
    --n-700: #cfcee0;
    --n-800: #e4e3ef;
    --n-900: #f1f0f8;
    --n-1000: #fbfaff;

    --bg: var(--n-0);
    --bg-subtle: var(--n-100);
    --surface: #0d0c18;
    --surface-2: #13121f;
    --text: var(--n-1000);
    --text-2: var(--n-600);
    --text-3: var(--n-500);
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);

    /* Accent op donker: iets lichter voor contrast */
    --accent-soft: color-mix(in srgb, var(--accent) 16%, #08070f);
    --accent-soft-2: color-mix(in srgb, var(--accent) 28%, #08070f);
    --accent-text: color-mix(in srgb, var(--accent) 70%, #fff);
    --accent-hover: color-mix(in srgb, var(--accent) 86%, #fff);
    --accent-press: color-mix(in srgb, var(--accent) 80%, #000);

    /* Feedback op donker */
    --success-100: rgba(150, 211, 52, .1);
    --success-200: rgba(150, 211, 52, .24);
    --success-800: #b5e46a;
    --warning-100: rgba(251, 146, 60, .1);
    --warning-200: rgba(251, 146, 60, .26);
    --warning-800: #fdba74;
    --danger-100: rgba(251, 113, 133, .1);
    --danger-200: rgba(251, 113, 133, .26);
    --danger-800: #fda4af;
    --info-100: rgba(56, 189, 248, .1);
    --info-200: rgba(56, 189, 248, .26);
    --info-800: #7dd3fc;

    /* Elevation op donker: schaduw + lichte bovenrand i.p.v. grijze schaduw */
    --e-0: 0 0 0 1px var(--border);
    --e-1: 0 1px 2px rgba(0, 0, 0, .4);
    --e-2: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --e-3: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px -12px rgba(0, 0, 0, .7);
    --e-4: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px -20px rgba(0, 0, 0, .85);
    --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
    --scrim: rgba(0, 0, 0, .66);
}

::selection { background: var(--accent-soft-2); color: var(--n-1000); }

/* =========================================================
   FLOW noir — eigen tokens (toegevoegd door shell & home).
   Gedeeld met menu/checkout: gebruik deze i.p.v. losse waarden.
   ====================================================== */
:root {
    /* Display-accent: cursieve serif, ENKEL voor één accentwoord in grote titels (nooit body/UI) */
    --font-serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;

    /* Mega-typografie (hero, kerncijfers, footer-woordmerk) */
    --fs-mega: clamp(56px, 10.5vw, 176px);
    --fs-giant: clamp(44px, 6.8vw, 112px);
    --track-mega: -0.055em;

    /* Glass: zwevende header, tabbalk, mandje, popovers */
    --glass: rgba(18, 17, 30, .62);
    --glass-strong: rgba(14, 13, 24, .86);
    --glass-border: rgba(255, 255, 255, .1);
    --glass-blur: saturate(1.5) blur(20px);
    --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, .08);

    /* Accent als lichtbron */
    --glow: color-mix(in srgb, var(--accent) 38%, transparent);
    --glow-soft: color-mix(in srgb, var(--accent) 16%, transparent);
    --glow-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 10px 40px -8px var(--glow);

    /* Warm wit met een zweem merkkleur: voor het cursieve serif-accentwoord */
    --ink-warm: color-mix(in srgb, var(--accent) 30%, #fbf4ee);

    /* Lijnen en vlakken */
    --hairline: rgba(255, 255, 255, .08);
    --hairline-strong: rgba(255, 255, 255, .16);
    --leader: rgba(255, 255, 255, .22);          /* puntjes-leader in de menukaart */
    --veil: linear-gradient(180deg, rgba(8, 7, 15, .55) 0%, rgba(8, 7, 15, 0) 28%, rgba(8, 7, 15, .2) 55%, var(--n-0) 100%);

    /* Shell-maten */
    --nav-pill-h: 60px;
    --nav-pill-h-compact: 52px;
    --nav-offset: 14px;                          /* afstand pill ↔ bovenrand */
    --nav-space: calc(var(--nav-pill-h) + 2 * var(--nav-offset)); /* hoogte die de header inneemt */
    --tabbar-inset: 10px;                        /* zwevende tabbalk: afstand tot de randen */

    /* Kaart (Google Maps-iframe) in nachtmodus */
    --map-filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.9) contrast(.95);
}

/* =========================================================
   FLOW noir — skeletons / laadstaten (systeem: .sk* in site.css)
   Donkere vlakken met een héél subtiele lichte sweep en een
   vleugje accent-gloed, zodat het bij de rest van noir hoort.
   ====================================================== */
:root {
    --skeleton-base: var(--n-150);
    --skeleton-shine: color-mix(in srgb, var(--accent) 7%, rgba(255, 255, 255, .055));
    --skeleton-media: var(--n-100);
    --skeleton-icon: var(--n-300);
    --skeleton-btn-shine: rgba(255, 255, 255, .22);
    --skeleton-ink: var(--n-500);
    --skeleton-ink-shine: var(--n-900);
}