/* Rustiger kleurgebruik (18-10-2026, op verzoek: "de kleuren ogen wat rommelig").

   Wat er rommelig aan was: zes tinten die tegelijk iets wilden zeggen. Koperen
   links, beige vlakken (citaat, actief gesprek, keuzechips), bruine
   schreefletters in het citaat, een donkere kopbalk als hardste contrast op het
   scherm, half doorzichtige kaarten. De regel hier: koper alleen voor wat je
   kunt aanklikken of wat aanstaat; de rest zwart, grijs en wit.

   Bewust NIET aangeraakt: de achtergrond van de pagina (die hoort bij de
   website) en het verloop onderaan de tekst boven de vraagbalk.

   Alleen het lichte thema: 90-dark-theme.css heeft zijn eigen kleuren. Eén
   bestand, als laatste geladen, zodat het in één keer terug te draaien is. */

html:not([data-theme="dark"]) {
    /* Effen kaarten in plaats van wit met 90% dekking: op het verloop van de
       achtergrond kregen ze anders per plek een andere tint. */
    --surface:   #FFFFFF;
    --surface-2: #FAFAF7;
}

/* ── Kopbalk: de achtergrond van de pagina, 7% donkerder ────────────────── */
/* Eerst wit voorgesteld, toen grijs; beide afgewezen (19-10-2026): "het moet
   de achtergrondkleur zijn maar dan iets donkerder". Dus precies het verloop
   van body (00-tokens-base.css) met een donkere laag van 7% erover, uit drie
   varianten (4, 7, 10%) gekozen. fixed houdt het verloop in lijn met de
   pagina eronder, zodat het warme vlak linksboven doorloopt. */
html:not([data-theme="dark"]) header {
    background:
        linear-gradient(rgba(28, 24, 18, 0.07), rgba(28, 24, 18, 0.07)),
        radial-gradient(ellipse at 8%  0%,  rgba(201, 138, 76, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 92% 100%, rgba(201, 138, 76, 0.05) 0%, transparent 50%),
        linear-gradient(160deg, #F7F6F2 0%, #F5F4F0 55%, #F3F2EE 100%);
    background-attachment: fixed;
    border-bottom: 1px solid rgba(28, 24, 18, 0.11);
    box-shadow: none;
    color: var(--text);
}
html:not([data-theme="dark"]) header h1,
html:not([data-theme="dark"]) .header-brand h1 { color: var(--navy); }
html:not([data-theme="dark"]) .header-sub,
html:not([data-theme="dark"]) header p { color: var(--text-3); }

html:not([data-theme="dark"]) .header-nav > .ref-drawer-toggle,
html:not([data-theme="dark"]) .nav-avatar-btn {
    border: 1px solid var(--border-2) !important;
    background: #FFFFFF !important;
    color: var(--text-2) !important;
}
html:not([data-theme="dark"]) .header-nav > .ref-drawer-toggle:hover,
html:not([data-theme="dark"]) .nav-avatar-btn:hover {
    background: var(--surface-2) !important;
    border-color: var(--control-border) !important;
    color: var(--text) !important;
}
html:not([data-theme="dark"]) .nav-avatar-initials { color: var(--text); }
html:not([data-theme="dark"]) .nav-icon-btn,
html:not([data-theme="dark"]) .header-nav-btn {
    color: var(--text-2);
    border-color: var(--border);
}
html:not([data-theme="dark"]) .nav-icon-btn:hover,
html:not([data-theme="dark"]) .header-nav-btn:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-2) !important;
}

/* ── Wetcitaat: dezelfde letter als het antwoord, donkere tekst ──────────── */
/* Was Georgia in koper op beige: het citaat schreeuwde harder dan het
   antwoord. Het onderscheid draagt nu de koperen streep en het grijze vlak. */
html:not([data-theme="dark"]) .answer-story-scroll .conv-turn-answer .legal-citation,
html:not([data-theme="dark"]) .answer-story-scroll pre.conv-turn-answer .legal-citation,
html:not([data-theme="dark"]) .answer-story-scroll .conv-turn-answer blockquote,
html:not([data-theme="dark"]) .answer-story-scroll pre.conv-turn-answer blockquote,
html:not([data-theme="dark"]) .answer-section-body blockquote,
html:not([data-theme="dark"]) .answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer blockquote,
html:not([data-theme="dark"]) .answer-card.reading-profile-professional .answer-section-body blockquote,
html:not([data-theme="dark"]) .answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer .legal-citation,
html:not([data-theme="dark"]) .answer-card.reading-profile-professional .answer-section-body .legal-citation {
    font-family: inherit;
    font-size: inherit;
    color: var(--text-2);
    background: var(--surface-2);
    border-left: 3px solid var(--vf-orange-2);
    border-radius: 0 6px 6px 0;
}

/* ── Actief gesprek in de zijbalk: grijs vlak, koperen streepje ──────────── */
html:not([data-theme="dark"]) .conv-item--active {
    background: rgba(42, 47, 54, 0.06);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--vf-orange-2);
}
html:not([data-theme="dark"]) .conv-item--active .conv-item-name { color: var(--text); }

/* ── Chips en de conceptmodus: neutraal, niet beige ──────────────────────── */
html:not([data-theme="dark"]) .draft-mode-pill {
    background: var(--surface-2);
    border-color: var(--border);
}
html:not([data-theme="dark"]) .draft-mode-pill-cmd {
    font-family: inherit;
    font-style: normal;
    color: var(--text);
}

/* ── Wettekst in de viewer: lid- en onderdeelnummers grijs ──────────────── */
/* Ze waren koper, maar je kunt er niet op klikken; koper is voor wat wel kan. */
html:not([data-theme="dark"]) .doc-opmaak .wet-lidnr,
html:not([data-theme="dark"]) .doc-opmaak .wet-li-nr { color: var(--text-3); }

/* ── De rest van de kopbalk die op wit-op-donker rekende ────────────────── */
/* De gesprekstitel op de telefoon (.kop-titel) was wit: op de witte balk
   verdween hij helemaal. */
html:not([data-theme="dark"]) .kop-titel { color: var(--text); }
html:not([data-theme="dark"]) .kop-titel:focus-visible { outline-color: var(--vf-orange-2); }
html:not([data-theme="dark"]) .kop-titel-invoer {
    color: var(--text);
    background: #FFFFFF;
    border-color: var(--border-2);
}
html:not([data-theme="dark"]) .header-nav a { color: var(--text-2); }
html:not([data-theme="dark"]) .header-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

/* ── Links zonder eigen opmaak: koper in plaats van browserblauw ───────────── */
/* In de handleiding, bij het abonnement en elders stonden losse links in het
   standaard browserblauw. Onderstreept blijven ze: ze staan in lopende tekst. */
html:not([data-theme="dark"]) main a:not([class]) { color: var(--blue); }