/* ══════════════════════════════════════════════════════════════════
   OSTUGRUPP — disainitokenid  v1.0 · proov 01 · 13.08.2026
   REEGEL: iga roll = ÜKS väärtus. Uut tooni ei lisata kunagi —
   lisatakse uus ROLL. Nimed inglise keeles (kood), seletused eesti.
   ══════════════════════════════════════════════════════════════════ */
:root{

/* ─── A1 · VÄRVID: ROLLID, MITTE TOONID ─────────────────────────── */

/* Bränd. #059669 on siit kustutatud — seda ei ole enam olemas. */
--brand:#047857;              /* nupp, link, hind, aktiivne olek. Valge peal 5,00:1 */
--brand-hover:#035e43;        /* ainult hiirega üle */
--brand-active:#024430;       /* VAJUTATUD. Seni puudus täielikult. */
--brand-on-dark:#34d399;      /* roheline tumedal pinnal. #0f172a peal 9,28:1 */

/* Pinnad. Ainult hele režiim. */
--surface:#ffffff;            /* kaart, modaal, väli */
--surface-raised:#ffffff;     /* sama värv — kõrgust annab VARI, mitte toon */
--surface-page:#f8fafc;       /* lehe taust */
--surface-muted:#f1f5f9;      /* vaikne plokk, tabeli päis, keelatud nupp */
--surface-inverse:#0f172a;    /* jalus, tume riba */

/* Piirid */
--border:#e2e8f0;             /* vaikimisi 1px piir */
--border-strong:#cbd5e1;      /* vormivälja piir, eraldaja rõhuga */
--border-inverse:#334155;     /* piir tumedal pinnal */

/* Tekst. --text-on-dark asendab 32 nimetut literaali. */
--text:#0f172a;               /* valge peal 17,85:1 */
--text-muted:#475569;         /* valge peal 7,58:1 */
--text-subtle:#64748b;        /* valge peal 4,76:1 — AA piiril, ära mine allapoole */
--text-on-dark:#ffffff;       /*  SEE roll oli nimetu */
--text-on-dark-muted:#cbd5e1; /* #0f172a peal 12,3:1 */
--text-on-brand:#ffffff;      /* rohelisel nupul */

/* Seisundid. Punaseid oli 5 — nüüd on üks. */
--state-success:#047857;      /* laos, õnnestus */
--state-error:#b91c1c;        /* viga, kustuta (valge peal 6,47:1) */
--state-error-hover:#991b1b;
--state-error-active:#7f1d1d;
--state-warning:#b45309;      /* ainus hoiatustoon — oranž #ea580c kustutatud */
--state-info:#0369a1;         /* info, tarne (valge peal 5,93:1) */
--state-oos:#475569;          /* OTSAS = neutraalne, mitte punane. Otsas ei ole viga.
                                 NB: neutraalne EI TÄHENDA vaikset. 7,58:1 valgel — sama
                                 kaal ja kontrast mis soodusmärgisel. Ära heleda. */

/* Kaubandus */
--price:#0f172a;
--price-sale:#b91c1c;         /* sama punane mis --state-error, teine roll */
--rating:#b45309;             /* täidetud tärn */
--rating-empty:#cbd5e1;       /* tühi tärn — täidetu vs tühi = 3,46:1 (nõue ≥3:1) */
--wishlist:var(--state-error);/* täidetud süda — VIIDE, mitte oma väärtus.
                                 Nimi on olemas, kui kunagi vaja eristada;
                                 väärtusi on üks. #e11d48 ära too tagasi. */

/* ══════════════════════════════════════════════════════════════════
   ERANDID — OMANIKE OTSUSED. MITTE ÜHTLUSTADA.
   Need kaks väärtust on teadlikult väljaspool süsteemi. Kummagi taga
   on põhjus, mis on tähtsam kui ühtsus. Kui keegi neid „ära parandab",
   läheb midagi päriselt katki.
   ══════════════════════════════════════════════════════════════════ */

/* ERAND 1 · Poe tootenimed jäävad 14,5px.
   Kõik ülejäänud poole piksli väärtused (13,5 / 12,5 jt) lähevad
   skaalale — see üks ei lähe. 15px peale tõstmine nõuab nelja
   reserveeritud kaardikõrguse ümberarvutust; seda praegu ei tehta.
   Reavahe on 20px, seega kaks rida = 40px nagu --text-sm juures. */
--text-shop-name:400 14.5px/20px var(--font-text);
--text-shop-name-tracking:0;

/* ERAND 2 · Avalehe usaldusriba murdepunkt on 940px, mitte 1024px.
   Mõõdetud põhjus: 768px juures on riba min-content ~870px, saadaval
   720px — neljas kast lõigati ekraanist välja. Viga on hiljuti
   parandatud. Ainult usaldusriba; muu leht kasutab --bp-lg. */
--bp-trustbar:940px;

/* ─── A2 · ALFA-REDELID (senise 22 asemel 5) ────────────────────── */

--brand-a1:rgb(4 120 87/.06);   /* õrn taust: laos-riba, valitud filter */
--brand-a2:rgb(4 120 87/.12);   /* teisese nupu hover, kiip */
--brand-a3:rgb(4 120 87/.20);   /* piir tinditud taustal */
--brand-a4:rgb(4 120 87/.32);   /* FOOKUSRÕNGAS — ainus retsept */
--brand-a5:rgb(4 120 87/.48);   /* kuma, kate */

--danger-a1:rgb(185 28 28/.06);
--danger-a2:rgb(185 28 28/.12);
--danger-a3:rgb(185 28 28/.20);
--danger-a4:rgb(185 28 28/.32);  /* punane fookusrõngas */
--danger-a5:rgb(185 28 28/.48);

--ink-a1:rgb(15 23 42/.04);      /* varjude ja katete alus */
--ink-a2:rgb(15 23 42/.08);
--ink-a3:rgb(15 23 42/.12);
--ink-a4:rgb(15 23 42/.24);
--ink-a5:rgb(15 23 42/.48);      /* modaali tagune scrim */
/* NB --ink-a* töötab ainult HELEL pinnal. Tumedal pinnal on --ink
   sama värv mis taust — vari iseendale. Vt --black-a* (A2b). */


/* ══════════════════════════════════════════════════════════════════
   A2b · TUME PIND
   Pood ei ole ainult valge: jalus, teateriba, hero, alumine CTA-riba,
   mega-bänner, sahtli päis ja korvi teade on tumedad. Neil ei olnud
   ühtki tokenit ja igaüks leiutas oma väärtuse. Siin on need rollid.
   ══════════════════════════════════════════════════════════════════ */

/* Valge alfa-redel: tõstetud pind TUMEDAL. Sama rütm mis --brand-a*. */
--on-dark-a1:rgb(255 255 255/.06);   /* õrn tint, vahetriip */
--on-dark-a2:rgb(255 255 255/.12);   /* tõstetud plokk jaluses */
--on-dark-a3:rgb(255 255 255/.20);   /* piir tumedal pinnal */
--on-dark-a4:rgb(255 255 255/.32);   /* rõhutatud piir, eraldaja */
--on-dark-a5:rgb(255 255 255/.48);   /* kate */

/* Roheline tumedal EI OLE --brand-a*: #047857 on tumedam kui #0f172a,
   seega .06-.20 tint oleks tumedal nähtamatu. Baas on --brand-on-dark. */
--brand-on-dark-a1:rgb(52 211 153/.06);
--brand-on-dark-a2:rgb(52 211 153/.12);
--brand-on-dark-a3:rgb(52 211 153/.20);
--brand-on-dark-a4:rgb(52 211 153/.32);
--brand-on-dark-a5:rgb(52 211 153/.48);

/* Hele bränd sai kolm astet; tumeda pinna roheline sai seni ühe. */
--brand-on-dark-hover:#5fe0b3;   /* 10,88:1 tindil */
--brand-on-dark-active:#25c48c;  /* 7,95:1 tindil */

/* Jalus vajab KAHTE vaikset astet. --text-subtle #64748b annab tindil
   ainult 3,63:1 ja kukub 4,5:1 nõudest läbi — tumedal seda ei kasutata. */
--text-on-dark-subtle:#94a3b8;   /* 6,96:1 tindil */

/* Kõrgus tumedal pinnal ei tule --ink-a*-st: --ink ON #0f172a, ehk vari
   iseendale. Tumedal pinnal on vari puhas must. */
--black-a1:rgb(0 0 0/.45);
--black-a2:rgb(0 0 0/.55);
--black-a3:rgb(0 0 0/.80);
--shadow-card-on-dark:0 1px 2px var(--black-a2),0 2px 8px var(--black-a1);
--shadow-modal-on-dark:0 24px 64px var(--black-a3);

/* Läbipaistvad pinnad. --surface on läbipaistmatu, seega kleepuv päis
   ja fotokate vajavad oma rolle — muidu backdrop-filter sureb ära. */
--surface-translucent:rgb(255 255 255/.92);
--surface-translucent-strong:rgb(255 255 255/.96);
--surface-inverse-translucent:rgb(15 23 42/.92);
--scrim-photo:rgb(15 23 42/.55);     /* tume kate foto peal */
--scrim-photo-strong:rgb(15 23 42/.72); /* sama, kui peal on teksti */
--blur-sticky:12px;                  /* backdrop-filter: blur(var(--blur-sticky)) */

/* ─── A3 · TÜPOGRAAFIA ──────────────────────────────────────────── */
/* API kuju: AATOM on primitiiv, LIIDETUD on mugavus. Liidetud token on
   ehitatud aatomitest, seega neid ei saa lahku triivida — üks väärtus
   elab ühes kohas.

   Vaikimisi kasutatakse LIIDETUD vormi:
     font:var(--text-sm); letter-spacing:var(--text-sm-tracking);

   Aatomit kasutatakse ainult siis, kui vaja on päriselt ÜHTE telge —
   nt reavahe ilma suuruseta ikooniglüüfil, pillil või üherealisel
   märgisel, kus suurus tuleb mujalt:
     line-height:var(--lh-flat);

   font-weight 800 EI OLE alla laaditud — seda siin ei esine.
   Kehatekst ei lange telefonis alla 16px (iOS suumib sisse).         */

--font-display:'Space Grotesk','Segoe UI',sans-serif;
--font-text:'DM Sans','Segoe UI',sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

/* Aatomid · kaal */
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;

/* Aatomid · suurus */
--fs-2xs:12px;  --fs-xs:13px;  --fs-sm:14px;  --fs-md:16px;  --fs-lg:18px;
--fs-h1:clamp(28px,4.4vw,44px);
--fs-h2:clamp(24px,3.2vw,32px);
--fs-h3:clamp(20px,2.2vw,24px);
--fs-h4:18px;
--fs-price-lg:clamp(26px,5vw,32px);
--fs-price-md:20px;
--fs-price-sm:14px;

/* Aatomid · reavahe. --lh-flat on ROLL, mitte number: reavaheta kast,
   mille kõrguse annab padding. Katab 41 senist line-height:1 reeglit. */
--lh-flat:1;
--lh-2xs:16px;  --lh-xs:18px;  --lh-sm:20px;  --lh-md:24px;  --lh-lg:28px;
--lh-h1:1.08;  --lh-h2:1.15;  --lh-h3:1.25;  --lh-h4:26px;
--lh-price-lg:1.12;  --lh-price-md:24px;  --lh-price-sm:18px;

/* Liidetud · 7 tekstiastet */
--text-2xs:var(--fw-medium) var(--fs-2xs)/var(--lh-2xs) var(--font-text);   --text-2xs-tracking:.02em;
--text-xs:var(--fw-regular) var(--fs-xs)/var(--lh-xs) var(--font-text);     --text-xs-tracking:0;
--text-sm:var(--fw-regular) var(--fs-sm)/var(--lh-sm) var(--font-text);     --text-sm-tracking:0;
--text-md:var(--fw-regular) var(--fs-md)/var(--lh-md) var(--font-text);     --text-md-tracking:0;
--text-lg:var(--fw-regular) var(--fs-lg)/var(--lh-lg) var(--font-text);     --text-lg-tracking:0;
--label-sm:var(--fw-semibold) var(--fs-2xs)/var(--lh-flat) var(--font-text); --label-sm-tracking:.06em;
--label-md:var(--fw-semibold) var(--fs-sm)/16px var(--font-text);           --label-md-tracking:.02em;

/* Liidetud · 4 pealkirjaastet, neist 3 rambil */
--h1:var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-display);      --h1-tracking:-.02em;
--h2:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-display);      --h2-tracking:-.015em;
--h3:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-display);  --h3-tracking:-.01em;
--h4:var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);  --h4-tracking:-.005em;

/* Liidetud · 3 hinnaastet, kõik tabelnumbritega */
--price-lg:var(--fw-bold) var(--fs-price-lg)/var(--lh-price-lg) var(--font-display); --price-lg-tracking:-.02em;
--price-md:var(--fw-bold) var(--fs-price-md)/var(--lh-price-md) var(--font-display); --price-md-tracking:-.015em;
--price-sm:var(--fw-medium) var(--fs-price-sm)/var(--lh-price-sm) var(--font-text);  --price-sm-tracking:0;

/* ─── A4 · VAHEREDEL · 4px baas, 14 astet ───────────────────────── */
/* Nimi = väärtus. Nii ei teki "space-md, aga mitu see on?" küsimust. */
--space-2:2px;   /* AINUS erand võrgust: ikooni optiline nihe */
--space-4:4px;
--space-8:8px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-32:32px;
--space-40:40px;
--space-48:48px;
--space-56:56px;
--space-64:64px;
--space-80:80px;
--space-96:96px;
--tap-min:44px;  /* PUUTETSOON, mitte vahe. Iga vajutatav asi ≥ 44×44. */

/* ─── A5 · NURGAD ───────────────────────────────────────────────── */
--radius-8:8px;      /* kiip, väike silt, sisendi eelliide */
--radius-12:12px;    /* nupp, vormiväli, väike kaart */
--radius-16:16px;    /* tootekaart, paneel */
--radius-20:20px;    /* modaal, kangelasplokk */
--radius-pill:999px; /* laoseisu kiip, lehitsemine */
--radius-circle:50%; /* avatar, ümar ikooninupp */

/* ─── A6 · VARJUD · 8 nimega retsepti (senise 69 asemel) ─────────── */
/* Hele pind: --ink-a*. Tume pind: --black-a* (vt A2b). */
--shadow-card:0 1px 2px var(--ink-a1),0 2px 8px var(--ink-a2);
--shadow-card-hover:0 2px 4px var(--ink-a2),0 8px 24px var(--ink-a3);
--shadow-modal:0 24px 64px var(--ink-a4);
--shadow-sticky:0 -2px 16px var(--ink-a3);        /* kleepuv alariba: vari ÜLES */
/* Fookusrõngas on TÄISVÄRV, mitte alfa. Alfa-astmega .32 komposiitub
   valgel toonini rgb(175 212 201) = 1,61:1 ja kukub WCAG 1.4.11 (3:1)
   nõudest läbi; ka .48 annab ainult 2,10:1. Alfa jääb pehmeks kumaks
   rõnga ümber, aga nähtav rõngas on täisvärv. */
--focus-ring:0 0 0 2px var(--surface),0 0 0 5px var(--brand);              /* 5,00:1 valgel */
--focus-ring-danger:0 0 0 2px var(--surface),0 0 0 5px var(--state-error); /* 6,47:1 valgel */
--focus-ring-on-dark:0 0 0 2px var(--surface-inverse),0 0 0 5px var(--brand-on-dark); /* 9,28:1 tindil */
--glow-brand:0 4px 16px var(--brand-a4);
--glow-brand-sm:0 1px 3px var(--brand-a3);

/* ─── A7 · MURDEPUNKTID · 5 (senise 36 asemel) ──────────────────── */
/* NB: CSS muutujad EI TÖÖTA @media reeglis — need on siin           */
/* dokumentatsiooniks ja build-tööriistale. CSS-i kirjuta arv.       */
--bp-sm:480px;    /* suur telefon */
--bp-md:768px;    /* tahvel — meie nõrgim vahemik, vt märkust */
--bp-lg:1024px;   /* väike sülearvuti */
--bp-xl:1280px;   /* töölaud */
--container-max:1440px;
--container-pad:16px;

/* ─── KIHID · z-index ja kleepuvad ribad ────────────────────────── */
/* Kleepuvaid alaribasid on neli ja telefonis olid nad üksteise peal.
   Reegel: MEIE ribasid on korraga nähtaval TÄPSELT ÜKS. Nad ei virna,
   nad asendavad üksteist. Prioriteet: lisa korvi > võrdlus >
   alanavigatsioon. Kõigil sama kõrgus ja sama vari.

   OTSUSTATUD 13.08 (variant A): tootelehel on kleepuv „Lisa korvi"
   bottom:0 ja alanavigatsioon on peidus. Korviarv kolib ribale endale
   44px nupuna. Põhjus: virnastamine sõi 144px püsivalt, 22% 667px
   ekraanist, igal tootelehel. Kõigil muudel lehtedel jääb
   alanavigatsioon puutumata.

   NB KÜPSISERIBA EI OLE MEIE OMA. Ta tuleb pluginast (.oga-cc-bar),
   tema z-index on 999999 ja me ei löö teda üle ühegi tokeniga. Ta on
   ANTUD, mitte juhitav: alati kõige peal. Meie kolm mahutavad end
   tema alla — kuni küpsisele ei ole vastatud, on nad peidus. Ainus
   asi, mida me küpsiseribaga teeme, on NIHUTAMINE, mitte kihistamine.
   --z-cookie allpool kirjeldab tema kohta järjekorras, mitte ei
   määra seda. */
--z-sticky:400;    /* kõik neli alariba — sama kiht, sest korraga on üks */
--z-header:600;    /* kleepuv päis */
--z-cookie:800;    /* VÄLINE küpsiseriba .oga-cc-bar — päris väärtus on 999999.
                      See token on dokumentatsioon, mitte juhtnupp: kirjuta
                      seda kasutades reegel „meie ribad on selle all". */
--z-modal:1000;    /* modaal + selle scrim */
--z-toast:1200;    /* teateriba — ainus, mis tohib modaali peale jääda */

--sticky-h:72px;   /* KÕIGI meie alaribade kõrgus. Ühtlustus: alanavigatsioon
                      kasvab 65 kuni 72, kleepuv „Lisa korvi" 71 kuni 72. Lisandub env(safe-area-inset-bottom).
                      Lehe body saab sama palju padding-bottom'i, et sisu
                      ei jääks riba alla. */

/* ─── LIIKUMINE (nii vähe kui võimalik, PageSpeed 91 on vara) ───── */
--dur-fast:120ms;  /* vajutus */
--dur:200ms;       /* hover, fookus */
--ease:cubic-bezier(.2,.6,.3,1);
}

@media (min-width:768px){ :root{ --container-pad:24px; } }
@media (min-width:1280px){ :root{ --container-pad:32px; } }

@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; }
  [data-pulse]{ animation:none; }
}

/* „Otsas" märgise pulss — omaniku otsus, dokumenteeritud.
   Kolm kordust ja jääb seisma: tähelepanu, mitte tähelepanu püüdmine. */
@keyframes oos-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }