@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; }

/* ── Spanje: warm crème, rood, azulejo-blauw, goud; serif-koppen ─────────── */

:root[data-theme-id="spain"] {
    --washi:        #faf5ea;
    --washi-sunk:   #f1e8d6;
    --card:         #fffdf8;
    --card-raised:  #ffffff;

    --sumi:         #2b1d16;
    --sumi-soft:    #5a463a60;
    --ink:          #5a463a;
    --ink-faint:    #8f7b6c;

    --shu:          #c1272d;   /* rood: "nu", vandaag, de + knop */
    --shu-soft:     #c1272d1a;
    --ai:           #1f5f8b;   /* azulejo-blauw */
    --sakura:       #d9779c;
    --matcha:       #7a9a4a;
    --kin:          #e0a11b;

    --line:         #2b1d1614;
    --line-strong:  #2b1d1626;

    --shadow-sm:    0 1px 2px #2b1d1610;
    --shadow-md:    0 2px 6px #2b1d160f, 0 10px 28px #2b1d1614;
    --shadow-lg:    0 -2px 12px #2b1d1610, 0 -24px 60px #2b1d161f;

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

@media (prefers-color-scheme: dark) {
    :root[data-theme-id="spain"]:not([data-theme="light"]) {
        --washi:       #17110e;
        --washi-sunk:  #100c0a;
        --card:        #211915;
        --card-raised: #2a201b;
        --sumi:        #f5eadb;
        --ink:         #d3c4b3;
        --ink-faint:   #94836f;
        --shu:         #e8564f;
        --shu-soft:    #e8564f26;
        --ai:          #6fa8d6;
        --sakura:      #e59ab8;
        --matcha:      #9fbb6e;
        --kin:         #f0c04a;
        --line:        #f5eadb14;
        --line-strong: #f5eadb26;
        --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="spain"][data-theme="dark"] {
    --washi:       #17110e;
    --washi-sunk:  #100c0a;
    --card:        #211915;
    --card-raised: #2a201b;
    --sumi:        #f5eadb;
    --ink:         #d3c4b3;
    --ink-faint:   #94836f;
    --shu:         #e8564f;
    --shu-soft:    #e8564f26;
    --ai:          #6fa8d6;
    --sakura:      #e59ab8;
    --matcha:      #9fbb6e;
    --kin:         #f0c04a;
    --line:        #f5eadb14;
    --line-strong: #f5eadb26;
    --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="spain"] .topbar { background: var(--washi); }
:root[data-theme-id="spain"] .brand__text-main { letter-spacing: 0.02em; font-weight: 800; }
:root[data-theme-id="spain"] .day--active { background: var(--shu); border-color: var(--shu); }
:root[data-theme-id="spain"] .day--active .day__alt { color: var(--washi); }
:root[data-theme-id="spain"] .fab--ai { background: var(--ai); }
:root[data-theme-id="spain"] .btn--ink { background: var(--ai); color: #fff; }

/* ── Duitsland: koel grijs, zwart, rood en goud; gecondenseerde koppen ───── */

:root[data-theme-id="germany"] {
    --washi:        #f4f5f7;
    --washi-sunk:   #e9ebef;
    --card:         #ffffff;
    --card-raised:  #ffffff;

    --sumi:         #1a1c20;
    --sumi-soft:    #3d414860;
    --ink:          #3d4148;
    --ink-faint:    #7a808a;

    --shu:          #c8202f;   /* rood: "nu", vandaag, de + knop */
    --shu-soft:     #c8202f1a;
    --ai:           #355c7d;   /* staalblauw */
    --sakura:       #c98ab0;
    --matcha:       #4f8a5b;
    --kin:          #e3a71c;   /* goud */

    --line:         #1a1c2014;
    --line-strong:  #1a1c2026;

    --shadow-sm:    0 1px 2px #1a1c2010;
    --shadow-md:    0 2px 6px #1a1c200f, 0 10px 28px #1a1c2014;
    --shadow-lg:    0 -2px 12px #1a1c2010, 0 -24px 60px #1a1c201f;

    --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme-id="germany"]:not([data-theme="light"]) {
        --washi:       #121417;
        --washi-sunk:  #0c0e10;
        --card:        #1b1e23;
        --card-raised: #23272d;
        --sumi:        #f2f3f5;
        --ink:         #c5c9d0;
        --ink-faint:   #868c96;
        --shu:         #ef5a63;
        --shu-soft:    #ef5a6326;
        --ai:          #7ea3cc;
        --sakura:      #d8a5c6;
        --matcha:      #7fb38a;
        --kin:         #f0c14b;
        --line:        #f2f3f514;
        --line-strong: #f2f3f526;
        --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="germany"][data-theme="dark"] {
    --washi:       #121417;
    --washi-sunk:  #0c0e10;
    --card:        #1b1e23;
    --card-raised: #23272d;
    --sumi:        #f2f3f5;
    --ink:         #c5c9d0;
    --ink-faint:   #868c96;
    --shu:         #ef5a63;
    --shu-soft:    #ef5a6326;
    --ai:          #7ea3cc;
    --sakura:      #d8a5c6;
    --matcha:      #7fb38a;
    --kin:         #f0c14b;
    --line:        #f2f3f514;
    --line-strong: #f2f3f526;
    --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;
}

/* Bewegwijzering: kapitalen, strak, met een gouden accent op de actieve dag. */
:root[data-theme-id="germany"] .topbar { background: var(--washi); }
:root[data-theme-id="germany"] .brand__text-main { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; font-size: 1.3rem; }
:root[data-theme-id="germany"] .day--active { background: var(--sumi); border-color: var(--sumi); color: var(--washi); }
:root[data-theme-id="germany"] .day--active .day__alt { color: var(--kin); }
:root[data-theme-id="germany"] .fab--ai { background: var(--ai); }
:root[data-theme-id="germany"] .btn--ink { background: var(--sumi); color: var(--washi); }

/* ── Wereldreiziger: oceaanblauw, jade en zonsondergang; Sora-koppen ──────── */

:root[data-theme-id="world"] {
    --washi:        #f3f1ea;
    --washi-sunk:   #e8e4d8;
    --card:         #fffefb;
    --card-raised:  #ffffff;

    --sumi:         #14343f;   /* diep oceaanblauw */
    --sumi-soft:    #3f5a6460;
    --ink:          #3f5a64;
    --ink-faint:    #7f9299;

    --shu:          #e07a2f;   /* zonsondergang: "nu", vandaag, de + knop */
    --shu-soft:     #e07a2f1a;
    --ai:           #1f8a70;   /* jade */
    --sakura:       #d98ba6;
    --matcha:       #6f9f5b;
    --kin:          #d9a441;

    --line:         #14343f14;
    --line-strong:  #14343f26;

    --shadow-sm:    0 1px 2px #14343f10;
    --shadow-md:    0 2px 6px #14343f0f, 0 10px 28px #14343f14;
    --shadow-lg:    0 -2px 12px #14343f10, 0 -24px 60px #14343f1f;

    --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme-id="world"]:not([data-theme="light"]) {
        --washi:       #0f1c22;
        --washi-sunk:  #0a1418;
        --card:        #16262e;
        --card-raised: #1d3039;
        --sumi:        #eef0ea;
        --ink:         #c3ccce;
        --ink-faint:   #7f9299;
        --shu:         #f0955a;
        --shu-soft:    #f0955a26;
        --ai:          #4fbf9f;
        --sakura:      #e3a8be;
        --matcha:      #9abf85;
        --kin:         #e8b95c;
        --line:        #eef0ea14;
        --line-strong: #eef0ea26;
        --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="world"][data-theme="dark"] {
    --washi:       #0f1c22;
    --washi-sunk:  #0a1418;
    --card:        #16262e;
    --card-raised: #1d3039;
    --sumi:        #eef0ea;
    --ink:         #c3ccce;
    --ink-faint:   #7f9299;
    --shu:         #f0955a;
    --shu-soft:    #f0955a26;
    --ai:          #4fbf9f;
    --sakura:      #e3a8be;
    --matcha:      #9abf85;
    --kin:         #e8b95c;
    --line:        #eef0ea14;
    --line-strong: #eef0ea26;
    --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="world"] .topbar { background: var(--washi); }
:root[data-theme-id="world"] .brand__mark { color: var(--ai); }
:root[data-theme-id="world"] .brand__text-main { letter-spacing: 0.01em; font-weight: 700; }
:root[data-theme-id="world"] .day--active { background: var(--ai); border-color: var(--ai); }
:root[data-theme-id="world"] .day--active .day__alt { color: var(--washi); }
:root[data-theme-id="world"] .fab--ai { background: var(--sumi); }
:root[data-theme-id="world"] .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; }