/* ==========================================================================
   Digijurist 2026 redesign — TOKENID
   ==========================================================================
   See fail on ALUSKIHT: ainult custom properties, fondi-import, minimaalne
   reset ja pealkirja/keha baastüpograafia. Komponendid (nupud, kaardid,
   navigatsioon jm) elavad site.css-is — tokens.css ei tohi teada, KUIDAS
   midagi konkreetset välja näeb, ainult MIS värvid/mõõdud on olemas.

   Miks eraldi failina, mitte otse site.css sees: landing.html ja
   pricing.html laadivad mõlemad tokens.css + site.css eraldi <link>-idena
   (vt templates/redesign/_base.html) — kui muudad ainult värvipaletti,
   piisab, kui brauseri vahemälu kehtetuks muuta üks väiksem fail, mitte
   kogu komponendikomplekt uuesti alla laadida.
   ========================================================================== */

/* Fondifailid on juba kohalikud (static/redesign/fonts/*.woff2), suhtelised
   URL-id fonts.css sees on juba õiged — väliseid fonditeenuseid pole. */
@import "fonts/fonts.css";

:root {
  /* ---- Pind ja tint: tume süsinik-grafiit, "väga kallis" premium tunnetus ---- */
  --dj-bg: #202328;            /* lehe põhitaust (süsinik-grafiit) */
  --dj-bg-raised: #262A30;     /* kaardid/pinnad */
  --dj-bg-sunken: #1A1D21;     /* vaiksed vahealad, koodiplokid */
  --dj-ink: #F1F3F5;           /* põhitekst */
  --dj-ink-2: #AEB6BF;         /* sekundaarne tekst */
  --dj-ink-3: #8993A2;         /* metainfo, allkirjad — mõõdetud kitsaim juhtum on
                                   --dj-bg-raised (heledaim tume pind): 4.64:1, vastu
                                   --dj-bg 5.07:1. Algne kavandi väärtus #7E8791 mõõtis
                                   ainult 4.32:1 --dj-bg vastu ega läbinud AA 4.5:1. */
  --dj-hairline: rgba(255, 255, 255, .08);   /* peenjooned */
  --dj-hairline-2: rgba(255, 255, 255, .16); /* tugevam joon */

  /* ---- Aktsent: Digijuristi sinine — heledam tumedal taustal ---- */
  --dj-accent: #4C9EDE;        /* brändi sinine, tumedale lehele häälestatud */
  --dj-accent-deep: #7ABAEA;   /* hover/aktiivne = HELEDAM (tumedal pöördub suund) */
  --dj-accent-ink: #0C2B44;    /* tume tindisinine (valge nupu tekstivärv) */
  --dj-accent-wash: rgba(76, 158, 222, .13); /* õrn sinakas pesu (chip-taustad) */

  /* ---- Tume sektsioon (turvalisus + lõpu-CTA riba): veel sügavam kiht ---- */
  --dj-dark-bg: #15181C;
  --dj-dark-bg-2: #1A1E23;
  --dj-dark-ink: #F1F3F5;
  --dj-dark-ink-2: #AEB6BF;
  --dj-dark-hairline: rgba(255, 255, 255, .10);

  /* ---- Semantika: AINULT demo-annotatsioonides, mitte dekooriks ---- */
  --dj-risk: #E58974;  --dj-risk-wash: rgba(229, 137, 116, .14);
  --dj-ok: #6FC7A3;    --dj-ok-wash: rgba(111, 199, 163, .14);
  --dj-warn: #E0B663;  --dj-warn-wash: rgba(224, 182, 99, .14);

  /* ---- Paber: dokumendi-/UI-mockupid jäävad valgeks paberiks tumedal lehel
     (valge dokument tumedal = tugev kontrast, juriidiline paber). Kasutatud
     ainult landing.css-i paberipindadel (lp-demo, lp-mock, lp-journey__doc).
     NB: klassinimede loetelus EI TOHI olla tärn-kaldkriips järjendit —
     see sulgeks kommentaari enneaegselt ja sööks järgmise deklaratsiooni
     (theme.css dokumenteeritud lõks; juhtus siin päriselt --dj-paper'iga). ---- */
  --dj-paper: #FFFFFF;
  --dj-paper-ink: #1A1D21;
  --dj-paper-ink-2: #5A6472;
  --dj-paper-line: #E4E7EB;

  /* ---- Geomeetria: kärmem kui praegune (premium = vähem ümarust) ---- */
  --dj-radius-s: 6px;
  --dj-radius-m: 10px;
  --dj-radius-l: 14px;
  --dj-shadow-s: 0 1px 3px rgba(0, 0, 0, .3);
  --dj-shadow-m: 0 2px 10px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .35);
  --dj-shadow-l: 0 4px 20px rgba(0, 0, 0, .4), 0 28px 72px rgba(0, 0, 0, .42);

  /* ---- Tüpograafia ---- */
  --dj-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --dj-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dj-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* ---- Kiirused ---- */
  --dj-ease: cubic-bezier(.22, .61, .36, 1);
  --dj-dur-fast: .18s;
  --dj-dur: .45s;
  --dj-dur-slow: .8s;

  /* ---- Konteinerid ---- */
  --dj-wrap: 1120px;
  --dj-wrap-text: 720px;
  --dj-wrap-pad: 24px;

  /* Motion-süsteemi vaikeväärtused: motion.js kirjutab need käivitudes üle
     window.DJ_MOTION konfist (vt motion.js), et CSS ja JS loeksid sama
     tõde ühest kohast. Kui JS ei käivitu, jäävad siin need vaikeväärtused
     kehtima — sisu on sellegipoolest terve ja loetav. */
  --dj-reveal-distance: 22px;
  --dj-border-opacity: .5;
  --dj-nav-blur: 10px;
}

/* ==========================================================================
   Minimaalne reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }

/* Ükski laius ei tohi tekitada horisontaalset kerimist (QA-nõue) — clip, mitte
   scroll: scroll varjaks vea, clip toob selle nähtavale arendaja masinas. */
html, body { overflow-x: clip; }

/* ==========================================================================
   Baas-tüpograafia
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--dj-bg);
  color: var(--dj-ink);
  font-family: var(--dj-font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--dj-accent); }

/* Valik: accent-wash, mitte brauseri vaikimisi sinine — sama tinditoon mis
   ülejäänud aktsent-elemendid, et esiletõst tunduks lehe enda osana. */
::selection {
  background: var(--dj-accent-wash);
  color: var(--dj-ink);
}

/* Fookus peab olema alati nähtav — klaviatuuriga liikumine ei tohi kunagi
   kaduma minna (WCAG AA nõue speci punktist 11). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dj-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Konteiner
   ========================================================================== */
.dj-wrap {
  max-width: var(--dj-wrap);
  margin: 0 auto;
  padding: 0 var(--dj-wrap-pad);
}

/* Kitsas tekstikonteiner (päised, statement-tsitaadid) — omaette klass, sest
   .dj-wrap kannab kogu sektsiooni laiust, aga pikk tekstirida üle 75 märgi
   real muutub raskesti loetavaks. */
.dj-wrap-text {
  max-width: var(--dj-wrap-text);
  margin: 0 auto;
  padding: 0 var(--dj-wrap-pad);
}

@media (max-width: 860px) {
  .dj-wrap, .dj-wrap-text { padding: 0 20px; }
}

/* ==========================================================================
   Tüpograafia utility-klassid
   ========================================================================== */

/* Display (Newsreader): AINULT suured statement-pealkirjad. Suurus tuleb
   kontekstist (h1/h2/tsitaat), see klass kannab ainult fondipere-perekonna
   iseloomu — optical size (opsz) töötab automaatselt, sest tegu on
   variable-fondiga. EI kasuta font-style: italic — Newsreaderi italic-faili
   meil pole, vale-kaldkiri (skew) näeks fontina odav välja. */
.dj-display {
  font-family: var(--dj-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--dj-ink);
}

/* Kicker: numereeritud/väike eyebrow-rida enne pealkirja, nt
   "01 · Tööpõhimõte". Vasakjoondatud, mono, suurtähed — annab editorial-
   rütmi selle asemel, et iga sektsioon algaks tsentreeritud KICKER-sõnaga. */
.dj-kicker {
  display: block;
  font-family: var(--dj-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dj-ink-3);
}

/* Mono: § viited, süsteemiandmed, numbrid demodes — üldotstarbeline
   utility, mille peale saab komponendifailides (site.css) täpsemaid
   variante ehitada (nt .dj-src kasutab sama fondipere). */
.dj-mono {
  font-family: var(--dj-font-mono);
  font-size: 13px;
  letter-spacing: .04em;
}

/* Lead: hero/sektsiooni sissejuhatav lõik. Max-width em-üksustes, mitte
   px-des, sest see peab käituma proportsionaalselt fondisuurusega. */
.dj-lead {
  font-family: var(--dj-font-ui);
  font-size: 19px;
  line-height: 1.6;
  max-width: 34em;
  color: var(--dj-ink-2);
  font-weight: 400;
}