/* SHELA DESIGN SISTEM v1: zetoni (paket barve-1, 27. 10. 2026).
   Vir resnice: /root/shela-redesign/DESIGN-SISTEM.md, razdelek 2. Odloceno (Grega 27. 10.): vijolicna #A486FD
   (OKLCH 293) je edina blagovna barva Shele, zlata #D9B45A samo v 67 MUSIC.
   Nalozena PRVA v index.html (pred vsemi drugimi slogi). Moduli uporabljajo samo var(--zeton) in
   color-mix(in srgb, var(--zeton) N%, transparent); novih hex in rgba z lastno barvo ni.

   Imena: zlata je tu --gold (v DESIGN-SISTEM.md "--accent"), ker ime --accent v aplikaciji ze uporablja
   shadcn/Tailwind za ozadje ob lebdenju (bg-accent). Ob React rebuildu (MIGRACIJA korak 7) se lahko poenoti.

   Tema: aplikacija je danes samo temna (shela-enhance-v11.js "DARK MODE ONLY" vsili html.dark in theme=dark).
   Svetle vrednosti so pripravljene samo za :root[data-theme="light"] (danes tega atributa nihce ne nastavi).
   Namenoma NE za html brez razreda .dark: stara pravila za svetlo temo v modulih (:root:not(.dark) ...) imajo
   barve preslikane na najblizji temni zeton, zato bi preklop zetonov tam obrnil besedilo in ozadje.
   Prava svetla tema pride z novo lupino (MIGRACIJA korak 7). */
:root {
  --s0: #0B0A10; --s1: #141319; --s2: #1D1C23; --s3: #29282F;
  --t1: #EEEEF2; --t2: #AAAAB2; --t3: #7D7C86;
  --brand: #A486FD; --brand-strong: #895DEF;
  --gold: #D9B45A;
  --ok: #41CE90; --warn: #F0B135; --danger: #F44F5D;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --on-brand: #0B0A10; --on-gold: #0B0A10;
  /* barva nacina: edino, kar se med Shelo in 67 MUSIC spremeni */
  --mode: var(--brand); --mode-strong: var(--brand-strong); --on-mode: var(--on-brand);
  /* oblika */
  --r1: 8px; --r2: 12px; --r3: 18px; --r4: 26px; --pill: 999px;
  /* razmiki (mreza 4 pt) */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px;
  /* pisava: ena druzina, tekoca lestvica */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", Menlo, monospace;
  --fs-1: clamp(12px, .72rem + .1vw, 13px);
  --fs0: clamp(14px, .84rem + .15vw, 15.5px);
  --fs1: clamp(16px, .95rem + .25vw, 18px);
  --fs2: clamp(20px, 1.1rem + .6vw, 26px);
  --fs3: clamp(26px, 1.3rem + 1.4vw, 40px);
  /* gib */
  --t: 180ms; --t-slow: 320ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --s0: oklch(.15 .012 290); --s1: oklch(.19 .012 290); --s2: oklch(.23 .013 290); --s3: oklch(.28 .014 290);
    --t1: oklch(.95 .006 290); --t2: oklch(.74 .012 290); --t3: oklch(.59 .014 290);
    --brand: oklch(.70 .17 293); --brand-strong: oklch(.60 .21 293);
    --ok: oklch(.76 .15 160); --warn: oklch(.80 .15 80); --danger: oklch(.66 .20 20);
    /* --gold ostane tocno #D9B45A */
  }
}
/* svetla tema (sekundarna, isti zetoni, druge vrednosti) */
:root[data-theme="light"] {
  --s0: #FAFAFD; --s1: #F3F3F7; --s2: #EBEAEF; --s3: #DEDDE3;
  --t1: #16151F; --t2: #4D4B58; --t3: #7A7986;
  --brand: #7342D3; --brand-strong: #5E2FBF; --gold: #9A7A2A;
  --ok: #1E9A62; --warn: #B07A10; --danger: #D03545;
  --line: rgba(0, 0, 0, .08); --line-2: rgba(0, 0, 0, .14);
  --on-brand: #FFFFFF; --on-gold: #FFFFFF;
  --shadow: 0 10px 30px rgba(20, 20, 40, .12);
}
/* nacin 67 MUSIC: samo barva nacina se preklopi na zlato */
:root[data-mode="music"] { --mode: var(--gold); --mode-strong: var(--gold); --on-mode: var(--on-gold); }