@charset "utf-8";

/* ==========================================================================
   Thema's per landpakket.

   app.css bevat de basisset (Japan: washi, sumi, shu, ai). Hier staan de
   andere thema's als overrides op dezelfde variabelen. Elk thema heeft een
   licht en een donker blok, in beide mechanismen die app.css ook gebruikt:
   de systeemvoorkeur (media query) én de handmatige keuze ([data-theme]).

   Specificiteit: de donkere blokken in app.css zijn
   `:root:not([data-theme="light"])` (0,2,0). De blokken hier moeten daar
   boven zitten, anders wint het Japanse donker in een Nederlandse app.
   ========================================================================== */

/* ── Nederland: delfts blauw, oranje, wit ────────────────────────────────── */

:root[data-theme-id="netherlands"] {
    --washi:        #f5f7fb;
    --washi-sunk:   #e9edf5;
    --card:         #ffffff;
    --card-raised:  #ffffff;

    --sumi:         #14213d;
    --sumi-soft:    #3b466060;
    --ink:          #3b4660;
    --ink-faint:    #7b8499;

    --shu:          #e8590c;   /* oranje: "nu", vandaag, de + knop */
    --shu-soft:     #e8590c1a;
    --ai:           #1f4e9c;   /* delfts blauw */
    --sakura:       #c9a0dc;
    --matcha:       #6a994e;
    --kin:          #c99a2e;

    --line:         #14213d14;
    --line-strong:  #14213d26;

    --shadow-sm:    0 1px 2px #14213d10;
    --shadow-md:    0 2px 6px #14213d0f, 0 10px 28px #14213d14;
    --shadow-lg:    0 -2px 12px #14213d10, 0 -24px 60px #14213d1f;

    --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme-id="netherlands"]:not([data-theme="light"]) {
        --washi:       #0f1420;
        --washi-sunk:  #0a0e18;
        --card:        #171d2c;
        --card-raised: #1e2536;
        --sumi:        #eef2fa;
        --ink:         #c3cadb;
        --ink-faint:   #7f8aa3;
        --shu:         #ff8c42;
        --shu-soft:    #ff8c4226;
        --ai:          #7fa6e8;
        --sakura:      #d9b3e6;
        --matcha:      #9ab586;
        --kin:         #d8b25a;
        --line:        #eef2fa14;
        --line-strong: #eef2fa26;
        --shadow-sm:   0 1px 2px #0006;
        --shadow-md:   0 2px 6px #0005, 0 10px 28px #0007;
        --shadow-lg:   0 -2px 12px #0006, 0 -24px 60px #000a;
    }
}

:root[data-theme-id="netherlands"][data-theme="dark"] {
    --washi:       #0f1420;
    --washi-sunk:  #0a0e18;
    --card:        #171d2c;
    --card-raised: #1e2536;
    --sumi:        #eef2fa;
    --ink:         #c3cadb;
    --ink-faint:   #7f8aa3;
    --shu:         #ff8c42;
    --shu-soft:    #ff8c4226;
    --ai:          #7fa6e8;
    --sakura:      #d9b3e6;
    --matcha:      #9ab586;
    --kin:         #d8b25a;
    --line:        #eef2fa14;
    --line-strong: #eef2fa26;
    --shadow-sm:   0 1px 2px #0006;
    --shadow-md:   0 2px 6px #0005, 0 10px 28px #0007;
    --shadow-lg:   0 -2px 12px #0006, 0 -24px 60px #000a;
}

/* Het Nederlandse thema heeft geen papiertextuur en ronder kaartjes. */
:root[data-theme-id="netherlands"] .topbar { background: var(--washi); }
:root[data-theme-id="netherlands"] .brand__text-main { letter-spacing: 0; font-weight: 900; }
:root[data-theme-id="netherlands"] .day--weekend .day__alt { color: var(--ai); }
:root[data-theme-id="netherlands"] .day--active { background: var(--ai); border-color: var(--ai); }
/* Op de actieve (blauwe) dag moet het weekend-blauw weer licht worden, anders is de weekdag onzichtbaar. */
:root[data-theme-id="netherlands"] .day--active .day__alt { color: var(--washi); }
:root[data-theme-id="netherlands"] .fab--ai { background: var(--ai); }
:root[data-theme-id="netherlands"] .btn--ink { background: var(--ai); color: #fff; }

/* ── Neutraal = het Travelwind-merk: inlogscherm en een account zonder reis ─
   Marine #0B2545, Koraal #FF6B4A, Zand #F1EDE6, Lucht #DCE6EF (docs/merkidentiteit.md).
   Koraal als tekst is te licht op wit; --shu is daarom in licht een iets
   diepere koraal, het merkkoraal zelf zit in --koraal (logo-vleugel). */

:root[data-theme-id="neutral"] {
    --washi:        #F1EDE6;
    --washi-sunk:   #E7E0D4;
    --card:         #FFFFFF;
    --card-raised:  #FFFFFF;

    --sumi:         #0B2545;
    --sumi-soft:    #33415A60;
    --ink:          #33415A;
    --ink-faint:    #5C5A53;

    --shu:          #D9512F;
    --shu-soft:     #FF6B4A22;
    --koraal:       #FF6B4A;
    --ai:           #0B2545;
    --lucht:        #DCE6EF;
    --sakura:       #c9a0dc;
    --matcha:       #6a994e;
    --kin:          #c99a2e;

    --line:         #0B254514;
    --line-strong:  #0B254526;

    --shadow-sm:    0 1px 2px #0B254510;
    --shadow-md:    0 2px 6px #0B25450f, 0 10px 28px #0B254514;
    --shadow-lg:    0 -2px 12px #0B254510, 0 -24px 60px #0B25451f;

    --font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme-id="neutral"]:not([data-theme="light"]) {
        --washi:       #0B2545;
        --washi-sunk:  #081D37;
        --card:        #12305A;
        --card-raised: #1A3A66;
        --sumi:        #F1EDE6;
        --ink:         #C9D2DE;
        --ink-faint:   #94A3B8;
        --shu:         #FF8A6E;
        --shu-soft:    #FF6B4A2e;
        --koraal:      #FF6B4A;
        --ai:          #DCE6EF;
        --lucht:       #1A3A66;
        --line:        #F1EDE614;
        --line-strong: #F1EDE626;
        --shadow-sm:   0 1px 2px #0006;
        --shadow-md:   0 2px 6px #0005, 0 10px 28px #0007;
        --shadow-lg:   0 -2px 12px #0006, 0 -24px 60px #000a;
    }
}

:root[data-theme-id="neutral"][data-theme="dark"] {
    --washi:       #0B2545;
    --washi-sunk:  #081D37;
    --card:        #12305A;
    --card-raised: #1A3A66;
    --sumi:        #F1EDE6;
    --ink:         #C9D2DE;
    --ink-faint:   #94A3B8;
    --shu:         #FF8A6E;
    --shu-soft:    #FF6B4A2e;
    --koraal:      #FF6B4A;
    --ai:          #DCE6EF;
    --lucht:       #1A3A66;
    --line:        #F1EDE614;
    --line-strong: #F1EDE626;
    --shadow-sm:   0 1px 2px #0006;
    --shadow-md:   0 2px 6px #0005, 0 10px 28px #0007;
    --shadow-lg:   0 -2px 12px #0006, 0 -24px 60px #000a;
}

:root[data-theme-id="neutral"] .topbar { background: var(--washi); }
/* Het merkteken zelf is marine (of zand in het donker), niet koraal. */
:root[data-theme-id="neutral"] .brand__mark,
:root[data-theme-id="neutral"] .login__mark { color: var(--sumi); }
:root[data-theme-id="neutral"] .brand__text-main { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }