/* ================================================================
   theme.css — värvitokenid: hele / tume / öö
   ================================================================
   Lisatud 2026-09-03. MIKS see fail olemas on:

   Meie laiuskraadil kestab pime aeg pool aastat. Laps loeb metsas
   ülesannet ereda valge ekraani pealt, paneb telefoni taskusse ja
   astub teele — silm on pimestatud ja kohanemine võtab minuteid.
   Kolvikesed kohanevad ~5-7 minutiga, kepikesed kuni 30-ga. See ei
   ole stiiliküsimus, vaid liiklusohutus.

   Kolm reziimi, mitte kaks:
     light  — vaikimisi, päevane mäng
     dark   — õhtune tuba, aku säästmine (sama palett mis
              quiz_display projektoril: #1a2332 pere)
     night  — METSAS. Ainult soojad toonid, mitte ühtegi sinist
              ega heledat pinda. Merevaigukollane sellepärast, et
              laps loeb ülesande teksti ja vihjeid lõikude kaupa —
              sügavpunane säilitaks hämarnägemist paremini, aga
              tuhm punane tekst väsitab pikal lugemisel. Kui
              välitest ütleb teisiti, on see ÜKS token-plokk allpool.

   REEGEL: uus värv käib SIIA, mitte vaatesse. Kui kirjutad
   src/views/*.js sisse toore #abc123, siis tumedas vaates ta ei
   muutu ja SUITSUTEST EI NÄE SEDA — hetktõmmis on baidilt sama,
   sest värv on CSS-is, mitte HTML-is. Test kontrollib seda
   sektsioonis "värvitokenid" just sellepärast.
   ================================================================ */

:root {
    --bg:            #f0f2f5;
    --surface:       #ffffff;
    --surface-2:     #f8f9fa;
    --text:          #000000;   /* HELEDAS = brauseri vaikimisi must. Kui
                                    panna siia #2c3e50, muutub praeguse
                                    elus saidi tekstivärv — token peab
                                    hetkeolukorda kirjeldama, mitte
                                    parandama. */
    --title:         #2c3e50;
    --muted:         #888888;
    --border:        #eeeeee;
    --border-2:      #dddddd;

    --accent:        #3498db;
    --accent-tint:   #eaf4fb;
    --accent-border: #d6eaf8;
    --accent-text:   #2874a6;

    --ok:            #27ae60;
    --ok-tint:       #e8f5e9;
    --ok-border:     #c8e6c9;
    --ok-text:       #2e7d32;

    --warn:          #f1c40f;
    --warn-tint:     #fff9db;
    --warn-border:   #ffeeba;
    --warn-text:     #856404;
    --warn-accent:   #e67e22;

    --danger:        #e74c3c;
    --danger-border: #ff0000;

    --btn-bg:        #2c3e50;
    --btn-text:      #ffffff;
    --btn-muted:     #cccccc;

    --shadow:        rgba(0,0,0,0.1);
    --shadow-soft:   rgba(0,0,0,0.05);
    --shadow-mid:    rgba(0,0,0,0.08);
    /* Ülesandelehe olekutoonid. Nimed on SEMANTILISED (--hint-active-bg),
       mitte nummerdatud (--warn-tint-2): number ei ütle järgmisele
       lugejale, kumb kumba jaoks on, ja siis pannakse vale. */
    --muted-soft:      #aaaaaa;
    --hint-active-bg:  #fff3cd;
    --hint-timer-bg:   #fff5eb;
    --choice-hover-bg: #f7fbff;
    --choice-on-bg:    #eafaf1;
    --choice-on-text:  #1a7a3e;
    --input-off-bg:    #f9f9f9;
    /* Stardilehe punktinimekiri ja märgised */
    --skip-bg:         #f7f7f7;
    --skip-border:     #d5d5d5;
    --skip-tag-bg:     #ececec;
    --skip-text:       #7f8c8d;
    --tag-ok-bg:       #d4edda;
    --tag-next-bg:     #dbeafe;
    --tag-next-text:   #2563eb;
    --tag-off-bg:      #f3f4f6;
    --tag-off-text:    #9ca3af;
    --dot-idle:        #bdc3c7;
    --accent-glow:     rgba(52,152,219,0.15);
    --diploma-bg:      #fff8e1;
    --diploma-text:    #8a6d3b;
    --diploma-border:  #f0d9a0;
    --badge-text:      #ffffff;
    --text-2:          #555555;
    --ok-glow:         rgba(39,174,96,0.4);
    --ok-strong:       #1e8449;
    --ok-border-soft:  #a9dfbf;
    --danger-tint:     #fdecea;
    --danger-tint-bd:  #f5c6cb;
    --danger-text:     #8a3a3a;
    --info-text:       #31708f;
    --border-soft:     #e6e6e6;
    --dot-wait:        #cccccc;
    /* TÄIDETUD NUPUD. Öös peab nupp olema TUME pind heleda kirjaga,
       mitte hele pind — täidetud ere nupp on telefoni ekraanil suurim
       ühtlane valgusallikas ja just tema pimestab enne teele astumist.
       Heledas ja tumedas on ta endiselt täidetud (roheline/sinine). */
    --btn-ok-bg:       #27ae60;
    --btn-ok-text:     #ffffff;
    --btn-accent-bg:   #3498db;
    --btn-accent-text: #ffffff;

    /* ── Faas 2: ülejäänud mängijapool ─────────────────────────── */
    --danger-strong:   #c0392b;
    --danger-bd-soft:  #f5b7b1;
    --warn-orange:     #f39c12;
    --hint-text-soft:  #5c4b00;
    --accent-alt:      #8e44ad;
    --panel:           #f4f6f8;
    --page-alt:        #f5f6fa;
    --border-cool:     #e8ecf0;
    --text-slate:      #718096;
    --text-ink:        #2d3748;
    --text-soft:       #444444;
    --link-muted:      #666666;
    --accent-bd-2:     #cfe6f7;
    --ok-bd-2:         #c9ecd9;
    --ghost:           #dfe4ea;
    --note-ok-bg:      #eaf6ea;
    --note-ok-text:    #1e6b3a;
    --chat-mine:       #dcf8c6;
    /* Ooteruum ja START-loendus on TÄISEKRAANI värvipinnad. Öös on
       just nemad suurim valgusallikas kogu rakenduses — ja loendus
       tuleb täpselt sel hetkel, mil laps kohe metsa jookseb. */
    --wait-bg:         #2c3e50;
    --wait-text:       #ffffff;
    --wait-sub:        #aecadb;
    --count-bg:        #f39c12;
    --count-text:      #ffffff;
    /* Avalehe bänner on FOTO. Öös on täisekraani foto suur valgusallikas,
       seetõttu muutub seal ainult loor foto peal — pilti ennast me ei
       filtreeri (sama põhimõte, mis laste fotodel). */
    --hero-1:          rgba(26,37,47,.80);
    --hero-2:          rgba(44,62,80,.70);
    --hero-3:          rgba(39,174,96,.55);
    --hero-glow:       rgba(39,174,96,.25);
    --hero-text:       #ffffff;

    /* ── Faas 3: mängujuhi pool ──────────────────────────────── */
    --bg-admin:        #f4f7f6;
    --panel-2:         #f2f2f2;
    --panel-3:         #f4f4f4;
    --panel-4:         #f5f5f5;
    --panel-5:         #f7f9fa;
    --divider:         #f0f0f0;
    --border-3:        #e0e0e0;
    --border-4:        #e3e6ea;
    --border-5:        #e3e8ea;
    --border-6:        #dde3e8;
    --border-7:        #dcdcdc;
    --border-8:        #cbd5db;
    --border-9:        #cfd6dd;
    --muted-2:         #999999;
    --muted-3:         #bbbbbb;
    --text-dark:       #333333;
    --text-darker:     #222222;
    --grey-btn:        #95a5a6;
    --slate:           #5a6b7a;
    --info-btn:        #2980b9;
    --info-btn-bd:     #aed6f1;
    --info-deep:       #1a5276;
    --info-tint-2:     #ebf5fb;
    --alert-bg:        #fff1f0;
    --alert-bd:        #ffa39e;
    --alert-text:      #cf1322;
    --alert-bg-2:      #f8d7da;
    --orange-bd:       #f5cba7;
    --orange-bg:       #fef5e7;
    --orange-text:     #9c640c;
    --ok-tint-2:       #f0fff4;
    --ok-bd-3:         #d5f5e3;
    --ok-bd-4:         #cdebd9;
    --ok-deep:         #1e7a45;
    --ok-deep-2:       #1e6b43;
    --amber-bg:        #fff8e6;
    --amber-bg-2:      #fffde7;
    --amber-bg-3:      #fff3e0;
    --amber-deep:      #8a6100;
    --purple-tint:     #f5eef8;
    --chart-1:         #16a085;
    --chart-2:         #d35400;
    --text-faint:      #cccccc;

    /* Täidetud nupupinnad. Öös TUMEDAD — täidetud ere nupp on
       ekraani suurim ühtlane valgusallikas. Vt --btn-ok-bg. */
    --btn-danger-bg:   #e74c3c;
    --btn-warn-bg:     #e67e22;
    --btn-alt-bg:      #8e44ad;
    --btn-info-bg:     #2980b9;
    --btn-grey-bg:     #95a5a6;
    --btn-chart-bg:    #16a085;

    /* Keelevalija (views/shared.js) — komponent, mis on PEAAEGU
       IGAL lehel. Ta jäi faasi 3 esimesest ringist välja ja paistis
       öös valge täpina kõigi lehtede nurgas. */
    --lang-hover:      #f7f9fb;
    --lang-code-bg:    #eef1f4;
    --lang-code-on:    #1a5c8a;

    --btn-orange-bg:   #f39c12;
    --btn-danger2-bg:  #c0392b;
    --btn-yellow-bg:   #f1c40f;
    --timeline-idle:   #7f8c9b;
}

/* ── TUME: õhtune tuba ─────────────────────────────────────────
   Palett tuleb quiz_display'lt (src/views/quiz.js), mis oli juba
   enne seda faili tume. Kaks eri tumedat sinist oleks kaks eri
   toodet. */
:root[data-theme="dark"] {
    --bg:            #141b26;
    --surface:       #1e2836;
    --surface-2:     #24303f;
    --text:          #e6edf5;
    --title:         #ffffff;
    --muted:         #8fa3c0;
    --border:        #2b3849;
    --border-2:      #3a4a5f;

    --accent:        #4aa3df;
    --accent-tint:   #17293a;
    --accent-border: #24455e;
    --accent-text:   #8fc7ee;

    --ok:            #2ecc71;
    --ok-tint:       #12291c;
    --ok-border:     #1f4a31;
    --ok-text:       #7ee2a8;

    --warn:          #f1c40f;
    --warn-tint:     #2a2410;
    --warn-border:   #4a4020;
    --warn-text:     #e8cf7a;
    --warn-accent:   #e8944a;

    --danger:        #e74c3c;
    --danger-border: #a83226;

    --btn-bg:        #3a4a5f;
    --btn-text:      #ffffff;
    --btn-muted:     #3a4a5f;

    --shadow:        rgba(0,0,0,0.5);
    --shadow-soft:   rgba(0,0,0,0.35);
    --shadow-mid:    rgba(0,0,0,0.40);
    --muted-soft:      #6d7f96;
    --hint-active-bg:  #2a2410;
    --hint-timer-bg:   #2a1f10;
    --choice-hover-bg: #1b2a38;
    --choice-on-bg:    #12291c;
    --choice-on-text:  #7ee2a8;
    --input-off-bg:    #1a2330;
    --skip-bg:         #1a222d;
    --skip-border:     #35424f;
    --skip-tag-bg:     #2a3542;
    --skip-text:       #8fa3c0;
    --tag-ok-bg:       #16321f;
    --tag-next-bg:     #17293a;
    --tag-next-text:   #7ab8f0;
    --tag-off-bg:      #232d3a;
    --tag-off-text:    #7286a0;
    --dot-idle:        #4a5b70;
    --accent-glow:     rgba(74,163,223,0.18);
    --diploma-bg:      #2a2410;
    --diploma-text:    #e0c98a;
    --diploma-border:  #4a4020;
    --badge-text:      #ffffff;
    --text-2:          #b8c6d8;
    --ok-glow:         rgba(46,204,113,0.25);
    --ok-strong:       #7ee2a8;
    --ok-border-soft:  #1f4a31;
    --danger-tint:     #2a1614;
    --danger-tint-bd:  #4a2420;
    --danger-text:     #e79c96;
    --info-text:       #8fc7ee;
    --border-soft:     #303c4c;
    --dot-wait:        #4a3a22;
    --btn-ok-bg:       #27ae60;
    --btn-ok-text:     #ffffff;
    --btn-accent-bg:   #3498db;
    --btn-accent-text: #ffffff;

    --danger-strong:   #ff9c8f;
    --danger-bd-soft:  #5a2a24;
    --warn-orange:     #e8944a;
    --hint-text-soft:  #e8cf7a;
    --accent-alt:      #b98ad6;
    --panel:           #24303f;
    --page-alt:        #141b26;
    --border-cool:     #303c4c;
    --text-slate:      #9fb0c4;
    --text-ink:        #dbe4ef;
    --text-soft:       #cdd8e6;
    --link-muted:      #9fb0c4;
    --accent-bd-2:     #24455e;
    --ok-bd-2:         #1f4a31;
    --ghost:           #2b3849;
    --note-ok-bg:      #12291c;
    --note-ok-text:    #7ee2a8;
    --chat-mine:       #1f3a2a;
    --wait-bg:         #1a2332;
    --wait-text:       #ffffff;
    --wait-sub:        #8fa3c0;
    --count-bg:        #c07a1a;
    --count-text:      #ffffff;
    --hero-1:          rgba(20,27,38,.88);
    --hero-2:          rgba(30,40,54,.82);
    --hero-3:          rgba(39,174,96,.45);
    --hero-glow:       rgba(39,174,96,.18);
    --hero-text:       #ffffff;

    /* Faas 3 */
    --bg-admin:        #141b26;
    --panel-2:         #232d3a;
    --panel-3:         #232d3a;
    --panel-4:         #24303f;
    --panel-5:         #24303f;
    --divider:         #2b3849;
    --border-3:        #303c4c;
    --border-4:        #303c4c;
    --border-5:        #303c4c;
    --border-6:        #35424f;
    --border-7:        #35424f;
    --border-8:        #3a4a5f;
    --border-9:        #3a4a5f;
    --muted-2:         #7d8fa6;
    --muted-3:         #6d7f96;
    --text-dark:       #dbe4ef;
    --text-darker:     #e6edf5;
    --grey-btn:        #4a5b70;
    --slate:           #9fb0c4;
    --info-btn:        #3a8fd0;
    --info-btn-bd:     #24455e;
    --info-deep:       #8fc7ee;
    --info-tint-2:     #17293a;
    --alert-bg:        #2a1614;
    --alert-bd:        #5a2a24;
    --alert-text:      #ff9c8f;
    --alert-bg-2:      #3a1c1a;
    --orange-bd:       #4a3520;
    --orange-bg:       #2a2014;
    --orange-text:     #e0a860;
    --ok-tint-2:       #12291c;
    --ok-bd-3:         #1f4a31;
    --ok-bd-4:         #1f4a31;
    --ok-deep:         #7ee2a8;
    --ok-deep-2:       #7ee2a8;
    --amber-bg:        #2a2410;
    --amber-bg-2:      #2a2410;
    --amber-bg-3:      #2a2014;
    --amber-deep:      #e0c98a;
    --purple-tint:     #241a2e;
    --chart-1:         #2fb89c;
    --chart-2:         #e0763a;
    --text-faint:      #5a6b80;

    --btn-danger-bg:   #e74c3c;
    --btn-warn-bg:     #e8944a;
    --btn-alt-bg:      #b98ad6;
    --btn-info-bg:     #3a8fd0;
    --btn-grey-bg:     #4a5b70;
    --btn-chart-bg:    #2fb89c;

    --lang-hover:      #24303f;
    --lang-code-bg:    #2b3849;
    --lang-code-on:    #8fc7ee;

    --btn-orange-bg:   #e8944a;
    --btn-danger2-bg:  #b03a2e;
    --btn-yellow-bg:   #c9a227;
    --timeline-idle:   #5a6b80;
}

/* ── ÖÖ: metsas, pärast mida astutakse teele ────────────────────
   Ei ühtegi sinist. Ei ühtegi puhast valget. Roheline ja punane
   tulevad merevaigu perre tagasi — "õige/vale" eristub heleduse,
   mitte värvitooni kaudu, sest hämaras silm ei erista tooni niikuinii
   (kepikesed on värvipimedad). */
:root[data-theme="night"] {
    --bg:            #0b0906;
    --surface:       #15100a;
    --surface-2:     #1c1610;
    --text:          #d8ab6a;
    --title:         #efc98d;
    --muted:         #93764a;
    --border:        #2a2013;
    --border-2:      #3a2c1a;

    --accent:        #c2872f;
    --accent-tint:   #1b1409;
    --accent-border: #3a2c1a;
    --accent-text:   #d8ab6a;

    --ok:            #c9a227;
    --ok-tint:       #1a1408;
    --ok-border:     #4a3a18;
    --ok-text:       #e0bd6a;

    --warn:          #b8801f;
    --warn-tint:     #1b1409;
    --warn-border:   #3a2c1a;
    --warn-text:     #cfa055;
    --warn-accent:   #b8701f;

    --danger:        #a8481f;
    --danger-border: #a8481f;

    --btn-bg:        #2f2313;
    --btn-text:      #e6bd7c;
    --btn-muted:     #241b10;

    --shadow:        rgba(0,0,0,0.7);
    --shadow-soft:   rgba(0,0,0,0.55);
    --shadow-mid:    rgba(0,0,0,0.60);
    --muted-soft:      #7a6238;
    --hint-active-bg:  #1f1710;
    --hint-timer-bg:   #1f1710;
    --choice-hover-bg: #1b1409;
    --choice-on-bg:    #1a1408;
    --choice-on-text:  #e0bd6a;
    --input-off-bg:    #120d08;
    --skip-bg:         #14100a;
    --skip-border:     #2a2013;
    --skip-tag-bg:     #1c1610;
    --skip-text:       #93764a;
    --tag-ok-bg:       #221a0c;
    --tag-next-bg:     #221a0c;
    --tag-next-text:   #d8ab6a;
    --tag-off-bg:      #17110b;
    --tag-off-text:    #7a6238;
    --dot-idle:        #4a3a22;
    --accent-glow:     rgba(194,135,47,0.20);
    --diploma-bg:      #1f1710;
    --diploma-text:    #cfa055;
    --diploma-border:  #3a2c1a;
    --badge-text:      #f0d0a0;
    --text-2:          #b08a52;
    --ok-glow:         rgba(201,162,39,0.15);
    --ok-strong:       #e0bd6a;
    --ok-border-soft:  #4a3a18;
    --danger-tint:     #1f1109;
    --danger-tint-bd:  #3a2213;
    --danger-text:     #c07a4a;
    --info-text:       #cfa055;
    --border-soft:     #241b10;
    --dot-wait:        #4a3a22;
    --btn-ok-bg:       #3a2c1a;
    --btn-ok-text:     #efc98d;
    --btn-accent-bg:   #2f2313;
    --btn-accent-text: #e6bd7c;

    --danger-strong:   #c0562a;
    --danger-bd-soft:  #3f2415;
    --warn-orange:     #a8701f;
    --hint-text-soft:  #cfa055;
    --accent-alt:      #c2872f;
    --panel:           #1c1610;
    --page-alt:        #0b0906;
    --border-cool:     #241b10;
    --text-slate:      #93764a;
    --text-ink:        #d8ab6a;
    --text-soft:       #cfa055;
    --link-muted:      #93764a;
    --accent-bd-2:     #3a2c1a;
    --ok-bd-2:         #4a3a18;
    --ghost:           #2a2013;
    --note-ok-bg:      #1a1408;
    --note-ok-text:    #e0bd6a;
    --chat-mine:       #1f1710;
    --wait-bg:         #15100a;
    --wait-text:       #d8ab6a;
    --wait-sub:        #93764a;
    --count-bg:        #2f2313;
    --count-text:      #e6bd7c;
    --hero-1:          rgba(11,9,6,.94);
    --hero-2:          rgba(21,16,10,.92);
    --hero-3:          rgba(47,35,19,.92);
    --hero-glow:       rgba(194,135,47,.10);
    --hero-text:       #d8ab6a;

    /* Faas 3 */
    --bg-admin:        #0b0906;
    --panel-2:         #17110b;
    --panel-3:         #17110b;
    --panel-4:         #1c1610;
    --panel-5:         #1c1610;
    --divider:         #241b10;
    --border-3:        #2a2013;
    --border-4:        #2a2013;
    --border-5:        #2a2013;
    --border-6:        #3a2c1a;
    --border-7:        #3a2c1a;
    --border-8:        #3a2c1a;
    --border-9:        #3a2c1a;
    --muted-2:         #846b42;
    --muted-3:         #7a6238;
    --text-dark:       #d8ab6a;
    --text-darker:     #efc98d;
    --grey-btn:        #3a2c1a;
    --slate:           #93764a;
    --info-btn:        #8a6a2f;
    --info-btn-bd:     #3a2c1a;
    --info-deep:       #cfa055;
    --info-tint-2:     #1b1409;
    --alert-bg:        #1f1109;
    --alert-bd:        #3f2415;
    --alert-text:      #c0562a;
    --alert-bg-2:      #241310;
    --orange-bd:       #3a2c1a;
    --orange-bg:       #1b1409;
    --orange-text:     #cfa055;
    --ok-tint-2:       #1a1408;
    --ok-bd-3:         #4a3a18;
    --ok-bd-4:         #4a3a18;
    --ok-deep:         #e0bd6a;
    --ok-deep-2:       #e0bd6a;
    --amber-bg:        #1f1710;
    --amber-bg-2:      #1f1710;
    --amber-bg-3:      #1f1710;
    --amber-deep:      #cfa055;
    --purple-tint:     #1b1409;
    --chart-1:         #8a6a2f;
    --chart-2:         #a8551f;
    --text-faint:      #4a3a22;

    --btn-danger-bg:   #3a1f12;
    --btn-warn-bg:     #3a2c1a;
    --btn-alt-bg:      #2f2313;
    --btn-info-bg:     #2a2013;
    --btn-grey-bg:     #241b10;
    --btn-chart-bg:    #2a2013;

    --lang-hover:      #1c1610;
    --lang-code-bg:    #241b10;
    --lang-code-on:    #e0bd6a;

    --btn-orange-bg:   #3a2c1a;
    --btn-danger2-bg:  #331a10;
    --btn-yellow-bg:   #3a2c1a;
    --timeline-idle:   #4a3a22;
}

/* Lehe lõuend. Sama värv mis --bg sellepärast, et lehtede VAHEL
   — hetkel, mil vana leht on kadunud ja uut pole veel joonistatud
   — näitab brauser just seda. Nõrga leviga metsas on see hetk pikk
   ja ilma selleta on ta VALGE: 15-punktilises rajas ~45 valget
   välgatust. Meta color-scheme (src/lib/html.js viewport) katab
   sama hetke enne, kui see fail üldse kohale jõuab. */
html { background: var(--bg); }