/* ==========================================================================
   tokens.css — silvaland-disain.md §2 ja §9, sõna-sõnalt.
   AINUS fail teemas, kus tohib esineda hex-värv.
   Iga kommentaar on kontrollitud WCAG kontrastisuhe.
   ========================================================================== */

:root {
  /* ---- Brändivärvid (muutumatud) ---- */
  --silva-green-900:   #134021;  /* Main — Dark green */
  --silva-green-300:   #94B19D;  /* Light green — pind, MITTE piirjoon valgel */
  --silva-yellow:      #EBF63B;  /* Accent — ainult täidis */

  /* ---- Rohelise skaala (tuletatud) ---- */
  --silva-green-800:   #1B5A2E;  /* tekst valgel 8,24:1 */
  --silva-green-700:   #2A6B3C;  /* tekst valgel 6,43:1 */
  --silva-green-600:   #31794A;  /* tekst valgel 5,30:1 — väikseim AA-tekstiroheline */
  --silva-green-500:   #3D8A57;  /* tekst valgel 4,22:1 — AINULT suur tekst + ikoonid */
  --silva-green-400:   #4E9B68;  /* mittetekst valgel 3,38:1 — ikoon, piirjoon, graafik */
  --silva-green-200:   #B9CFC1;  /* pind; tekst #134021 peal 7,16:1 */
  --silva-green-100:   #DCE7E0;  /* pind; tekst #134021 peal 9,28:1 */
  --silva-green-50:    #EFF4F1;  /* pind; tekst #134021 peal 10,59:1 */

  /* ---- Kollase tuletised ---- */
  --silva-yellow-600:  #C7D31E;  /* tumedam täidis; must peal 12,76:1 */
  --silva-olive-700:   #6E7700;  /* KOLLASE TEKSTIVARIANT valgel — 4,88:1 */

  /* ---- Neutraalid ---- */
  --silva-ink:         #111111;  /* põhitekst valgel 18,88:1 */
  --silva-ink-2:       #3F4A43;  /* teisene tekst valgel 9,24:1 */
  --silva-ink-3:       #6B7873;  /* kolmandane tekst valgel 4,61:1 — piiril */
  --silva-border:      #5A6560;  /* piirjoon valgel 6,06:1 */
  --silva-border-soft: #C3CAC6;  /* AINULT dekoratiivne joon — 1,67:1, mitte UI-piir */
  --silva-surface:     #F4F6F5;
  --silva-white:       #FFFFFF;
  --silva-black:       #000000;

  /* ---- Staatusvärvid, heledal pinnal ---- */
  --silva-success:     #17703C;  /* 6,14:1 */
  --silva-warning:     #8A5300;  /* 6,33:1 */
  --silva-error:       #A11A13;  /* 7,86:1 */
  --silva-info:        #1B5578;  /* 8,02:1 */

  /* ---- Staatusvärvid tumerohelisel pinnal ---- */
  --silva-success-on-dark: #7BD9A0;  /* 6,88:1 */
  --silva-warning-on-dark: #F0C060;  /* 6,96:1 */
  --silva-error-on-dark:   #FF9A92;  /* 5,77:1 */
  --silva-info-on-dark:    #8CC7F0;  /* 6,47:1 */

  /* ---- Fookus ---- */
  --silva-focus-light: #134021;  /* valgel/heledal — 11,78:1 */
  --silva-focus-dark:  #EBF63B;  /* tumerohelisel — 9,97:1 */

  /* ---- Graafikuseeriad (§8) ---- */
  --chart-1: #134021;  --chart-1-on-dark: #7BD9A0;
  --chart-2: #1B4F72;  --chart-2-on-dark: #8CC7F0;
  --chart-3: #A85A1A;  --chart-3-on-dark: #F0A868;
  --chart-4: #6E7700;  --chart-4-on-dark: #D6DF6A;
  --chart-5: #9B7BC4;  --chart-5-on-dark: #C4AEE8;
  --chart-6: #4E9B68;  --chart-6-on-dark: #B9CFC1;

  /* ---- Tüpograafia (§5) ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:  clamp(2.75rem, 6vw, 4.5rem);
  --fs-h2:       clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:       1.375rem;
  --fs-body:     1.0625rem;
  --fs-body-sm:  0.9375rem;   /* 15px — allapoole mitte minna */
  --fs-eyebrow:  0.75rem;     /* ainult suurtähed + lai tähevahe */

  --ls-brand:    0.35em;
  --ls-display:  -0.02em;

  --lh-tight:    1.1;
  --lh-body:     1.6;

  /* ---- Ruumisüsteem: 4px baasruudustik (§11) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- Nurgaraadiused (§11) ---- */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;

  /* ---- Layout ---- */
  --wrap: 1200px;
  --wrap-narrow: 720px;
  /* Sisulehe tekstiveerg (page.php). Laiem kui --wrap-narrow, mis jääb
     kasutusse mujal (hero tekst, jalus) — muudatus ei tohtinud neid liigutada. */
  --wrap-content: 860px;

  /* ---- Semantilised aliased: hele režiim ---- */
  --surface:        var(--silva-white);
  --surface-raised: var(--silva-surface);
  --text:           var(--silva-ink);
  --text-2:         var(--silva-ink-2);
  --text-3:         var(--silva-ink-3);
  --accent-text:    var(--silva-green-600);
  --border:         var(--silva-border);
  --focus:          var(--silva-focus-light);

  /* Päis ja usalduse riba. Eraldi tokenid, sest need ei ole ei "tekst
     valgel" ega "tekst tumerohelisel" — nad vahetavad pinda koos režiimiga. */
  --header-text:    var(--silva-green-900);   /* 11,78 valgel */
  --header-rule:    var(--silva-border-soft); /* dekoratiivne joon */
  --trustbar-bg:    var(--silva-green-50);
  --trustbar-text:  var(--silva-green-900);   /* 10,59 green-50 peal */
  --trustbar-link:  var(--silva-green-700);   /* 5,78 green-50 peal */

  /* Kontuurnupu värv. Vahetub PINNAGA, mitte režiimiga — sellepärast on
     ta muutuja, mitte fikseeritud väärtus. Tumedad pinnad seavad ta
     kollaseks allpool components.css-is. */
  --btn-tertiary:   var(--header-text);
}

/* ==========================================================================
   Tume režiim (§9).

   HOIATUS: allpool on KAKS tokenite plokki — üks selgesõnalise valiku jaoks
   (data-theme="dark"), teine OS-i eelistuse jaoks. Nad peavad olema
   identsed. Kui lisad ühte tokeni, lisa TEISE KA — muidu töötab tume režiim
   ainult ühel neist teedest ja teisel jääb element nähtamatuks. MITTE automaatne inversioon — omad tokenid.
   Kontrollitud #0D2C17 vastu: valge 15,11 · #DCE7E0 11,91 · #B9CFC1 9,18
                               kollane 12,79 · piir #4E9B68 4,47
   ========================================================================== */

:root[data-theme="dark"] {
  --surface:        #0D2C17;
  --surface-raised: #134021;
  --text:           #FFFFFF;   /* 15,11 */
  --text-2:         #DCE7E0;   /* 11,91 */
  --text-3:         #B9CFC1;   /* 9,18 */
  --accent-text:    #EBF63B;   /* 12,79 — ainus kontekst, kus kollane ON tekstivärv */
  --border:         #4E9B68;   /* 4,47 mittetekst */
  --focus:          var(--silva-focus-dark);
  --header-text:    #FFFFFF;   /* 15,11 vs #0D2C17 */
  --header-rule:    #4E9B68;   /* 4,47 */
  --trustbar-bg:    #134021;
  --trustbar-text:  #DCE7E0;   /* 9,28 vs #134021 */
  --trustbar-link:  #EBF63B;   /* 9,97 vs #134021 */
  --btn-tertiary:   #FFFFFF;   /* 15,11 vs #0D2C17 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #0D2C17;
    --surface-raised: #134021;
    --text:           #FFFFFF;
    --text-2:         #DCE7E0;
    --text-3:         #B9CFC1;
    --accent-text:    #EBF63B;
    --border:         #4E9B68;
    --focus:          var(--silva-focus-dark);
    --header-text:    #FFFFFF;   /* 15,11 vs #0D2C17 */
    --header-rule:    #4E9B68;   /* 4,47 */
    --trustbar-bg:    #134021;
    --trustbar-text:  #DCE7E0;   /* 9,28 vs #134021 */
    --trustbar-link:  #EBF63B;   /* 9,97 vs #134021 */
    --btn-tertiary:   #FFFFFF;   /* 15,11 vs #0D2C17 */
  }
}