/* ===========================================================================
   CoreDesk — Material Design 3 design tokeni
   ---------------------------------------------------------------------------
   Univerzalna PASTELNA paleta, namjerno NEVEZANA uz brand klijenta.
   Izvedena iz dvije zadane boje:
       #DCDAF5  lavanda   → primary-container
       #F1D3F9  orhideja  → tertiary-container
   Površine su neutralno sive s blagim lavanda tonom.

   Tokeni su obične CSS varijable — ne učitavaju nijedan font i ne ovise
   ni o jednoj biblioteci. (SCOPE §3.2)
   =========================================================================== */

:root {
  /* ── Primarna: lavanda ──────────────────────────────────────────────── */
  --md-primary:                    #5A52B8;
  --md-on-primary:                 #FFFFFF;
  --md-primary-container:          #DCDAF5;
  --md-on-primary-container:       #171257;
  --md-primary-fixed-dim:          #BFBAEC;
  --md-inverse-primary:            #C0BCFF;

  /* ── Sekundarna: prigušena lavanda-siva ─────────────────────────────── */
  --md-secondary:                  #5E5C72;
  --md-on-secondary:               #FFFFFF;
  --md-secondary-container:        #E4E0F9;
  --md-on-secondary-container:     #1A1A2C;

  /* ── Tercijarna: orhideja ───────────────────────────────────────────── */
  --md-tertiary:                   #7A5480;
  --md-on-tertiary:                #FFFFFF;
  --md-tertiary-container:         #F1D3F9;
  --md-on-tertiary-container:      #2E1233;

  /* ── Greška ─────────────────────────────────────────────────────────── */
  --md-error:                      #BA1A1A;
  --md-on-error:                   #FFFFFF;
  --md-error-container:            #FFDAD6;
  --md-on-error-container:         #410002;

  /* Živa crvena za CRTU koja mora zapeti za oko, ne za tekst: `--md-error` je
     prigušena opeka, točna za poruku greške i dovoljno tamna za čitanje, ali
     kao obrub među sivim kućicama se izgubi. Ovdje se ništa ne čita, pa smije
     biti zasićenija nego što bi kontrast za tekst dopustio.                  */
  --md-error-strong:               #E30707;

  /* ── Površine (neutralne sive s lavanda tonom) ──────────────────────── */
  --md-surface:                    #FCFAFF;
  --md-on-surface:                 #1C1B20;
  --md-surface-variant:            #E5E1EC;
  --md-on-surface-variant:         #484553;
  --md-surface-dim:                #DCD9E3;
  --md-surface-bright:             #FCFAFF;

  --md-surface-container-lowest:   #FFFFFF;
  --md-surface-container-low:      #F6F3FB;
  --md-surface-container:          #F1EDF7;
  --md-surface-container-high:     #EBE7F2;
  --md-surface-container-highest:  #E5E1EC;

  --md-inverse-surface:            #313036;
  --md-inverse-on-surface:         #F4EFF7;

  --md-outline:                    #79757F;
  --md-outline-variant:            #CAC5D3;
  --md-scrim:                      #000000;

  /* ── Semantičke boje (statusi, značke) ──────────────────────────────── */
  /* Klijentova strana u niti komunikacije (§7.6.7). NEUTRALNO siva, namjerno:
     naša strana nosi lavandin ton iz palete, pa razlika među stranama ide po
     TONU, a ne samo po svjetlini. Ne postoji kao MD3 uloga jer je bliža
     bijeloj kartici nego ijedna `surface-container` stepenica. */
  --comm-client-bg:                #FAFAFA;

  /* Traka s filtrima. Hladan ton, izvan lavandine ljestvice — kontrole za
     filtriranje nisu sadržaj nego alat, pa se moraju odvojiti od svega oko
     sebe. Bez vlastite plohe se u gustoj kartici gube među ostalim elementima. */
  --filter-surface:                #F3F8F9;

  --md-success:                    #2E6B4F;
  --md-on-success:                 #FFFFFF;
  --md-success-container:          #C8EBD8;
  --md-on-success-container:       #05210F;
  /* Svjetlija zelena za SITNE detalje — tanke linije ikone u tamnoj varijanti
     se gube, pa im treba viši sjaj nego punoj plohi. */
  --md-success-light:              #43AD56;

  /* ── Logo CoreDesk ───────────────────────────────────────────────────────
     Boje znaka i teksta logotipa. Mjere i podrijetlo: `__temp/logo/README.md`.
     ⚠️ „Core" je gotovo crn, pa tamna tema NIJE kozmetika nego nužnost — bez
     vlastitih vrijednosti prva riječ logotipa ondje nestane.
     `--logo-mark` je svjesno tamniji od `--md-primary` (#5A52B8); mijenja se
     jednom vrijednošću ako zatreba uskladiti s ljubičastom iz sučelja. */
  --logo-core:                     #1A1D2D;
  --logo-desk:                     #3A2C82;
  --logo-mark:                     #3A2C82;
  --logo-tag:                      #605F65;

  /* Ploha „gotovo" za CIJELI REDAK tablice (evidencija: izdan izvještaj).
     Mnogo blijeđa od `--md-success-container`, jer ondje boja nosi jednu
     značku, a ovdje preplavljuje redak kroz četrdeset stupaca — zasićena bi
     ploha progutala tekst i povukla pogled s onoga što redak govori.
     Vrijednost je klijentov izbor. */
  --row-done:                      #EEFFEB;

  /* Slobodan tjedan u rasporedu po osobi (§7.8.8) — vlastiti pojam, ne
     „gotovo": ondje zelena znači obavljeno, ovdje PRAZNO MJESTO u koje posao
     još stane. Malo zasićenija od `--row-done` jer boji uski stupac, a ne
     redak preko cijele širine; tekst preko nje ne ide. */
  --plan-free:                     #E4F7DF;

  --md-warning:                    #7A5B00;
  --md-on-warning:                 #FFFFFF;
  --md-warning-container:          #FFE9A8;
  --md-on-warning-container:       #261A00;

  /* Živa žuta za PLOHU koja mora zapeti za oko, ne za tekst — parnjak
     `--md-error-strong`, i iz istog razloga. `--md-warning` je tamna oker:
     točna za tekst upozorenja na svijetloj podlozi, ali kao ispuna trake
     izgleda kao blato, a ne kao korak prema crvenom.

     ⚠️ NE koristiti za tekst: crno na njoj je čitljivo, bijelo nije.

     Tamna tema je namjerno NE mijenja — signalna žuta jednako radi na obje
     plohe, a druga vrijednost bi značila da „na putu prema crvenom" izgleda
     drukčije ovisno o temi.                                                 */
  --md-warning-strong:             #FFC200;

  --md-info:                       #1F5E8C;
  --md-on-info:                    #FFFFFF;
  --md-info-container:             #CFE6F7;
  --md-on-info-container:          #001E2F;

  /* ── Kategorijska paleta za grafove i oznake ────────────────────────── */
  /* Pastelni parovi: jaka boja za tekst/crtu, meka za pozadinu značke.   */
  --cat-1:        #7C6CE0;  --cat-1-soft: #E3DEFB;   /* lavanda   */
  --cat-2:        #3EA976;  --cat-2-soft: #D2F0E1;   /* zelena    */
  --cat-3:        #E2904A;  --cat-3-soft: #FCE7CF;   /* narančasta*/
  --cat-4:        #4C8FE8;  --cat-4-soft: #D6E7FC;   /* plava     */
  --cat-5:        #D06FB6;  --cat-5-soft: #FADCF1;   /* roza      */
  --cat-6:        #3FA8AD;  --cat-6-soft: #D0EFF0;   /* tirkizna  */
  --cat-7:        #9B7BD4;  --cat-7-soft: #EADFF8;   /* ljubičasta*/
  --cat-8:        #C9A227;  --cat-8-soft: #F7EDC7;   /* žuta      */

  /* ── Niz boja za GRAFOVE ────────────────────────────────────────────────
     🔑 ZAŠTO ODVOJENO OD `--cat-*`, a ne isti niz: uz značku boja je ukras
     pokraj natpisa i ikone, pa smije biti bilo koja. U grafu boja JE identitet
     — ako se dvije ne razlikuju, dvije stavke postaju jedna.

     Provjereno alatom, ne okom: izvorni redoslijed `--cat-*` PADA. Tirkizna
     (#3FA8AD) i roza (#D06FB6) pod deuteranopijom imaju ΔE 0,9 — praktički
     ista boja; tirkizna je usto ispod praga zasićenosti. Zato graf koristi
     šest hue-a u redoslijedu u kojem susjedne razlike prolaze (najgora 8,3).

     ⚠️ Tamna tema NIJE preslikana svijetla. Pojas svjetline je ondje uži
     (L 0,48–0,67), pa su narančasta, roza i žuta presvijetle za tamnu plohu i
     imaju vlastite korake. Obrnuto bi značilo da graf u tamnoj temi svijetli.

     Redoslijed je FIKSAN i dodjeljuje se po njemu — nikad se ne vrti u krug i
     nikad se ne prelaže kad filtar smanji broj stavki. Sedma stavka nije nova
     boja nego „ostalo". */
  --chart-1: #7C6CE0;   /* lavanda    */
  --chart-2: #E2904A;   /* narančasta */
  --chart-3: #4C8FE8;   /* plava      */
  --chart-4: #3EA976;   /* zelena     */
  --chart-5: #D06FB6;   /* roza       */
  --chart-6: #C9A227;   /* žuta       */
  --chart-rest: #9AA0A6;  /* „ostalo" — namjerno siva, nije sedmi identitet */

  /* ── Rampa za HEATMAPU ──────────────────────────────────────────────────
     🔑 ZAŠTO NE `--chart-*`: ondje boja znači IDENTITET (koji projekt), ovdje
     znači KOLIČINA. Šest različitih hue-a ne može se poredati, pa mreža obojana
     njima ne bi imala ni „više" ni „manje". Rampa je jedan hue u pet koraka
     svjetline — poredak se vidi i bez legende.

     Provjereno računom, ne okom (svjetlina, razmak susjednih koraka, i ΔE pod
     tri tipa daltonizma, za obje teme):
       · L pada monotono 0,69 → 0,11 (svijetla) i raste 0,03 → 0,22 (tamna),
       · najmanja razlika susjednih koraka ΔE 12,6 (svijetla) i 7,5 (tamna),
         najgore pod tritanopijom — i dalje iznad praga razlučivosti,
       · PRAZNA ćelija naspram prvog koraka 1,27 : 1. Prva verzija je tu pala
         na 1,02 — „ništa se nije radilo" i „radilo se malo" izgledali su isto,
         a to je pola onoga što heatmapa uopće treba pokazati. */
  --heat-0: #F3F1F7;   /* prazan tjedan — nije nula, nego „ničega nema" */
  --heat-1: #DBD4F7;
  --heat-2: #C0B5EF;
  --heat-3: #A08FE4;
  --heat-4: #7D6AD6;
  --heat-5: #5A48BE;

  /* Zauzeće kapaciteta — DRUGI hue, jer je i pitanje drugo. Ljubičasti redci
     odgovaraju „tko", ovaj jedan odgovara „koliko nas je puno". Da je i on
     ljubičast, čitao bi se kao još jedan klijent, i to najveći.

     Njegovi koraci su VEZANI UZ 100 %, a ne uz najjaču ćeliju (v. `load_heatmap`).
     Provjereno istom skriptom: L pada 0,72 → 0,15, najmanja razlika susjednih
     koraka ΔE 12,7 (svijetla) i 10,6 (tamna), prazno naspram prvog koraka
     1,21 : 1. */
  --load-1: #F8D8B4;
  --load-2: #F0BC8B;
  --load-3: #E9A05F;
  --load-4: #D4792E;
  --load-5: #A8551A;

  /* ── Oblik (MD3 shape scale) ────────────────────────────────────────── */
  /* Visina kontrole obrasca — JEDNA za sve, da polje, padajući izbornik,
     birač datuma i čip u istom redu budu točno iste visine. Mora primiti
     redak teksta (`--type-body-lg` → 24px) uz razmak i obrub: 24 + 16 + 2. */
  --control-h:         44px;

  --shape-none:        0;
  --shape-xs:          4px;
  --shape-sm:          8px;
  --shape-md:          12px;
  --shape-lg:          16px;
  --shape-xl:          28px;
  --shape-full:        999px;

  /* ── Elevacija ──────────────────────────────────────────────────────── */
  --elev-0: none;
  /* Sjena ljepljive trake. NIJE stepenica MD3 ljestvice `--elev-*` nego
     zasebna uloga: traka koja se zalijepi mora se odvojiti od sadržaja koji
     klizi ISPOD nje, a to traži mekši i spušteniji odsjaj nego ravna ploha na
     kartici. Zato ne dira ljestvicu — ona ostaje netaknuta. */
  --elev-sticky: 0 1px 2px rgba(28, 27, 32, .05), 0 6px 8px 1px rgba(28, 27, 32, .06);

  --elev-1: 0 1px 2px rgba(28, 27, 32, .05), 0 1px 3px 1px rgba(28, 27, 32, .06);
  --elev-2: 0 1px 2px rgba(28, 27, 32, .06), 0 2px 6px 2px rgba(28, 27, 32, .07);
  --elev-3: 0 4px 8px 3px rgba(28, 27, 32, .07), 0 1px 3px rgba(28, 27, 32, .08);
  --elev-4: 0 6px 10px 4px rgba(28, 27, 32, .08), 0 2px 3px rgba(28, 27, 32, .08);
  --elev-5: 0 8px 12px 6px rgba(28, 27, 32, .09), 0 4px 4px rgba(28, 27, 32, .09);

  /* ── Sloj stanja (state layer) ──────────────────────────────────────── */
  /* Ploha koja se ponaša kao kontrola (značka-poveznica, značka-gumb) na hover
     se blago ZATAMNI, umjesto da dobije sloj boje: značka dolazi u šest
     varijanti (`ok`, `warn`, `info`…), a sloj bi svakoj mijenjao ton drukčije.

     ⚠️ U tamnoj temi vrijednost je iznad 1 — na tamnoj plohi zatamnjenje se
     čita kao gašenje, a ne kao odziv. Zato je to token, a ne broj u pravilu:
     `components.css` ne smije znati koja je tema. */
  --state-brightness: .94;

  --state-hover:   .08;
  --state-focus:   .10;
  --state-pressed: .10;
  --state-drag:    .16;

  /* ── Gibanje ────────────────────────────────────────────────────────── */
  --ease-standard:      cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized:    cubic-bezier(.2, 0, 0, 1);
  --ease-decelerate:    cubic-bezier(0, 0, 0, 1);
  --dur-short:   150ms;
  --dur-medium:  250ms;
  --dur-long:    400ms;

  /* ── Tipografija ────────────────────────────────────────────────────── */
  --font-sans: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  --type-display-lg: 700 3.5rem/1.12 var(--font-sans);
  --type-display-md: 700 2.8rem/1.16 var(--font-sans);
  --type-display-sm: 700 2.25rem/1.22 var(--font-sans);
  --type-headline-lg: 650 2rem/1.25 var(--font-sans);
  --type-headline-md: 650 1.75rem/1.29 var(--font-sans);
  --type-headline-sm: 650 1.5rem/1.33 var(--font-sans);
  --type-title-lg:   600 1.375rem/1.27 var(--font-sans);
  --type-title-md:   600 1rem/1.5 var(--font-sans);
  --type-title-sm:   600 .875rem/1.43 var(--font-sans);
  --type-body-lg:    400 1rem/1.5 var(--font-sans);
  --type-body-md:    400 .875rem/1.43 var(--font-sans);
  --type-body-sm:    400 .75rem/1.33 var(--font-sans);
  --type-label-lg:   600 .875rem/1.43 var(--font-sans);
  --type-label-md:   600 .75rem/1.33 var(--font-sans);
  --type-label-sm:   600 .6875rem/1.45 var(--font-sans);
}

/* ===========================================================================
   Tamna tema.
   Uključuje se atributom [data-theme="dark"] na <html>, ili prati sustav.
   Uz prave tokene dobiva se gotovo besplatno. (SCOPE §7.10)
   =========================================================================== */

[data-theme="dark"] {
  --md-primary:                    #C0BCFF;
  --md-on-primary:                 #2A2379;
  --md-primary-container:          #413A91;
  --md-on-primary-container:       #E3DFFF;
  --md-inverse-primary:            #5A52B8;

  --md-secondary:                  #C7C4DD;
  --md-on-secondary:               #2F2E42;
  --md-secondary-container:        #464559;
  --md-on-secondary-container:     #E4E0F9;

  --md-tertiary:                   #E6B9EC;
  --md-on-tertiary:                #45264C;
  --md-tertiary-container:         #5E3C64;
  --md-on-tertiary-container:      #F1D3F9;

  --md-error:                      #FFB4AB;
  --md-on-error:                   #690005;
  --md-error-container:            #93000A;
  --md-on-error-container:         #FFDAD6;
  /* Na tamnoj plohi je #E30707 pretaman da bi zapeo za oko — ista uloga traži
     svjetliju crvenu, kao i kod ostalih tokena ove ljestvice. */
  --md-error-strong:               #FF5449;

  --md-surface:                    #141318;
  --md-on-surface:                 #E5E1E9;
  --md-surface-variant:            #484553;
  --md-on-surface-variant:         #CAC5D3;
  --md-surface-dim:                #141318;
  --md-surface-bright:             #3A383E;

  --md-surface-container-lowest:   #0F0E13;
  --md-surface-container-low:      #1C1B20;
  --md-surface-container:          #201F25;
  --md-surface-container-high:     #2B292F;
  --md-surface-container-highest:  #36343A;

  --md-inverse-surface:            #E5E1E9;
  --md-inverse-on-surface:         #313036;

  --md-outline:                    #948F9E;
  --md-outline-variant:            #484553;

  /* Isti odnos kao u svijetloj temi, zrcaljen: korak od kartice (#0F0E13)
     prema svjetlijem, i neutralno sivo naspram lavandine naše strane. */
  --comm-client-bg:                #1A1A1A;
  /* Hladan ton zadržan i u tamnoj temi — traka s filtrima se i ovdje odvaja
     od lavandine ljestvice, samo obrnutim smjerom svjetline. */
  --filter-surface:                #191C1D;

  --md-success:                    #8FD5AC;
  --md-on-success:                 #003920;
  --md-success-container:          #14512F;
  --md-on-success-container:       #C8EBD8;
  --md-success-light:              #5DC873;

  /* Logo: „Core" i tagline moraju posvijetliti da ne nestanu na tamnoj plohi. */
  --logo-core:                     #EDEBF5;
  --logo-desk:                     #C0BCFF;
  --logo-mark:                     #C0BCFF;
  --logo-tag:                      #9A98A8;

  /* ⚠️ Nije preslikana svijetla vrijednost — `#EEFFEB` je na tamnoj plohi
     zasljepljujuća ploča. Isti POMAK od plohe, samo u drugom smjeru: tek
     toliko iznad `--md-surface` da se redak izdvoji, a tekst ostane čitljiv. */
  --row-done:                      #16271A;

  /* Isto pravilo kao kod `--row-done`: ne preslikava se svijetla vrijednost
     nego se ponavlja POMAK od plohe, u drugom smjeru. */
  --plan-free:                     #1B2E1D;

  --md-warning:                    #EBC248;
  --md-on-warning:                 #3F2E00;
  --md-warning-container:          #5B4300;
  --md-on-warning-container:       #FFE9A8;

  --md-info:                       #97CBF5;
  --md-on-info:                    #00344F;
  --md-info-container:             #004C72;
  --md-on-info-container:          #CFE6F7;

  --cat-1-soft: #322C5C;  --cat-2-soft: #16402E;  --cat-3-soft: #4A331A;
  --cat-4-soft: #1B3455;  --cat-5-soft: #4A2540;  --cat-6-soft: #16403F;
  --cat-7-soft: #3A2C52;  --cat-8-soft: #443814;

  /* Tamni koraci niza za grafove — biraju se, ne preslikavaju (v. svijetlu
     temu). Lavanda, plava i zelena prolaze nepromijenjene; ostale tri su
     spuštene u pojas L 0,48–0,67. Provjereno nad tamnom plohom #141318. */
  --chart-2: #C97A33;   /* narančasta */
  --chart-5: #BC5EA2;   /* roza       */
  --chart-6: #AE8A1C;   /* žuta       */
  --chart-rest: #8A9096;

  /* Gore, ne dolje: na tamnoj plohi se odziv vidi kao posvjetljenje. */
  --state-brightness: 1.14;

  /* Rampa heatmape u tamnoj temi ide OBRNUTO — od plohe prema svijetlom, jer
     „više" mora biti uočljivije, a na tamnoj plohi to je svjetlije, ne tamnije.
     Nije preslikana svijetla tema; koraci su birani u pojasu iznad plohe. */
  --heat-0: #201F26;
  --heat-1: #2E2757;
  --heat-2: #3D3370;
  --heat-3: #50438F;
  --heat-4: #6455B0;
  --heat-5: #8172E4;

  --load-1: #3B2915;
  --load-2: #57391A;
  --load-3: #764E22;
  --load-4: #97662C;
  --load-5: #CE8C3C;

  --elev-sticky: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 8px 1px rgba(0, 0, 0, .15);

  --elev-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .30);
  --elev-4: 0 6px 10px 4px rgba(0, 0, 0, .15), 0 2px 3px rgba(0, 0, 0, .30);
  --elev-5: 0 8px 12px 6px rgba(0, 0, 0, .15), 0 4px 4px rgba(0, 0, 0, .30);
}