/* =============================================================================
   PrintDisain — disainisüsteem
   Suund A „Paigutus": joonestuspaber, tint, märkevärv, mõõtjoon.
   Kõik väärtused elavad siin. Komponendid ei tohi kunagi kirjutada
   otseväärtust — ainult var(--pd-*).
   ========================================================================== */

:root {
  /* --- Pinnad ---------------------------------------------------------- */
  /*
   * Lehe põhi oli jahe hallikassinine joonestuspaber (#E9EBEE) — see andis
   * kogu lehele tehnilise, kliendi sõnul „stoilise" tooni. Nüüd on ta soe ja
   * heledam; kõik senised kontrastid tõusid sellega (nt vaigistatud tekst
   * 4.50 -> 4.82), mitte ei langenud.
   */
  --pd-paber:      #F6F6F7;   /* lehe põhi — hele neutraalne hall */
  --pd-pind:       #FFFFFF;   /* kaardid, sisupinnad */
  --pd-pind-2:     #FAFAFB;   /* teisene pind, vaheldus */
  --pd-pind-tume:  #14181D;   /* jalus — kõige tumedam */
  --pd-pind-tume-2:#232A34;   /* CTA — üks aste heledam, et jalusest eristuks */

  /* --- Tekst ----------------------------------------------------------- */
  --pd-tint:       #14181D;   /* põhitekst */
  --pd-tint-2:     #3D4653;   /* teisene tekst */
  --pd-tint-3:     #636B78;   /* vaigistatud, allkirjad — 4.5:1 paberil */
  --pd-tint-vastu: #F2F4F6;   /* tekst tumedal põhjal */

  /* --- Jooned ---------------------------------------------------------- */
  --pd-joon:       #AEB2B9;   /* nähtav juhtjoon, diagrammid */
  --pd-joon-2:     #DFE1E5;   /* peen piir */

  /*
   * --- Aktsendid -------------------------------------------------------
   *
   * Punasel on kaks varianti, sest WCAG nõuab eri asjadelt eri kontrasti.
   * `--pd-mark` on ere brändipunane, mis läheb GRAAFIKASSE: piirid, jooned,
   * trükiala täide, valikunupu aktsent. Neile piisab 3:1 ja see täidab
   * (3.38 paberil, 4.04 valgel).
   *
   * TEKSTILE ja nupupõhjadele seda kasutada ei saa — 14 px valge kiri
   * #E8402A põhjal annab 4.04:1, nõutud on 4.5:1. Selleks on
   * `--pd-mark-tekst`, mis on täpselt nii palju tumedam, et läbi läheks,
   * ja jääb ikka sama punane.
   *
   * Reegel: `color:` ja `background:` -> `--pd-mark-tekst`.
   *         `border`, `stroke`, `fill`, `accent-color` -> `--pd-mark`.
   */
  --pd-mark:       #E8402A;   /* graafika — piirid, trükiala, aktsent */
  --pd-mark-tekst: #C4321F;   /* tekst ja nupupõhjad — 4.60 paberil, 5.49 valgel */
  --pd-mark-tume:  #A32A19;   /* hover — 6.06 paberil, 7.24 valgel */
  --pd-mark-hell:  #FDECE9;   /* õrn taust */
  /*
   * Teine aktsent tuleb live lehe paletist (Elementori globaalvärv
   * #10A19D). Varem oli siin sinine #2B5FD9, mis ei olnud kuskilt pärit.
   *
   * Tööjaotus punasega on tähenduslik, mitte suvaline:
   *   PUNANE  = tegevus ja bränd — nupud, CTA, lingid, mida tahame klõpsata.
   *   TIRKIIS = info ja struktuur — mõõdud, trükitehnikad, märkused,
   *             vaiksed sektsiooniribad.
   *
   * Sama kolmikjaotus, mis punasel: hele toon graafikale, tumedam tekstile.
   * #10A19D annab paberil 2.66 ega kõlba seal tekstiks ega piiriks;
   * #0A6B69 annab 5.30 paberil ja 6.33 valgel.
   */
  --pd-teine:       #10A19D;  /* graafika VALGEL pinnal — 3.18 */
  --pd-teine-tekst: #0A6B69;  /* tekst ja nupupõhjad — 5.30 paberil */
  --pd-teine-tume:  #085453;  /* hover — 7.32 paberil */
  --pd-teine-hell:  #E3F1F0;  /* õrn taust */

  /*
   * --- Live lehe rõõmus palett ------------------------------------------
   *
   * Live leht ei ole ühevärviline: hero on soe oranž gradient, sildid on
   * lillad pillid, lubaduste kaartidel on igal oma värviring. Meie versioon
   * oli tehniline joonis — klient ütles, et „liiga stoiline". Need neli
   * värvi tulevad live'i Elementori paletist ja käivad läbi kogu lehe:
   * lubadused, sammud, kategooriad, sildid.
   *
   * Igal värvil on kolm kuju, sest WCAG nõuab eri asjadelt eri kontrasti:
   *   *-ere   graafika ja täidised (ei kõlba tekstiks)
   *   *-tekst tekst ja nupupõhjad — kõik ≥4.5:1 valgel ja oma tindil
   *   *-tint  õrn taust
   */
  --pd-c1-ere:   #FF7000;  --pd-c1-tekst: #B14A00;  --pd-c1-tint: #FFF1E6;
  --pd-c2-ere:   #10A19D;  --pd-c2-tekst: #0A6B69;  --pd-c2-tint: #E3F1F0;
  --pd-c3-ere:   #A65FC3;  --pd-c3-tekst: #7B3E97;  --pd-c3-tint: #F6ECFA;
  --pd-c4-ere:   #FFBF00;  --pd-c4-tekst: #8A6200;  --pd-c4-tint: #FFF5DC;

  /* Hero soe gradient ja pehmed kujundid — live lehe eeskujul. */
  --pd-soe-1: #FFF4EA;
  --pd-soe-2: #FFE3C9;
  --pd-soe-3: #FFD2AC;

  /* --- Tähendusvärvid (aktsentidest eraldi) ---------------------------- */
  /* 5.25:1 paberil — #1E7A47 jäi 4.47 peale ja kukkus WCAG-ist napilt läbi. */
  --pd-ok:         #1B6E40;
  --pd-hoiatus:    #B4690E;
  --pd-viga:       #C4321F;

  /* --- Kirjatüübid ----------------------------------------------------- */
  /* Archivo on instantseeritud laiusele wdth=115 — „expanded" on sisse
     küpsetatud, font-stretch'i ei kasutata. Kaal jääb muutuvaks 100–900. */
  --pd-f-pealkiri: "Archivo PD", ui-sans-serif, system-ui, sans-serif;
  --pd-f-tekst:    "Public Sans PD", ui-sans-serif, system-ui, sans-serif;
  --pd-f-andmed:   "Martian Mono PD", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Tüpograafia skaala ---------------------------------------------- */
  --pd-t-2xs: 0.6875rem;  /* 11 — mono sildid */
  --pd-t-xs:  0.75rem;    /* 12 */
  --pd-t-sm:  0.875rem;   /* 14 */
  --pd-t-md:  1rem;       /* 16 — baas */
  --pd-t-lg:  1.125rem;   /* 18 */
  --pd-t-xl:  1.375rem;   /* 22 */
  --pd-t-2xl: 1.75rem;    /* 28 */
  --pd-t-3xl: 2.25rem;    /* 36 */
  --pd-t-4xl: clamp(2.25rem, 1.35rem + 3.8vw, 3.5rem);

  --pd-lh-tihe:  1.08;    /* suured pealkirjad */
  --pd-lh-keskm: 1.3;     /* väiksemad pealkirjad */
  --pd-lh-lai:   1.65;    /* leibtekst */

  --pd-ls-tihe:  -0.02em;
  --pd-ls-null:  0;
  --pd-ls-lai:   0.08em;  /* mono sildid, versaalid */

  /* --- Vahed (4px baas) ------------------------------------------------ */
  --pd-s-1:  0.25rem;  --pd-s-2:  0.5rem;   --pd-s-3:  0.75rem;
  --pd-s-4:  1rem;     --pd-s-5:  1.25rem;  --pd-s-6:  1.5rem;
  --pd-s-8:  2rem;     --pd-s-10: 2.5rem;   --pd-s-12: 3rem;
  --pd-s-16: 4rem;     --pd-s-20: 5rem;     --pd-s-24: 6rem;

  /* --- Vormid ---------------------------------------------------------- */
  /*
   * Nurgad olid 2px — „tehniline, mitte pehme". Klient soovis live lehe
   * pehmemat ilmet, kus kõik kaardid on ümarad ja nupud pillikujulised.
   * `-s` on väikestele asjadele (sildid, väljad), kus 10px läheks liiga
   * lopsakaks.
   */
  --pd-raadius:    10px;
  --pd-raadius-s:  6px;
  --pd-raadius-p:  999px;  /* nupud ja sildid */
  --pd-raadius-0: 0;
  --pd-piir:      1px solid var(--pd-joon-2);
  --pd-piir-tugev:1px solid var(--pd-joon);

  --pd-vari:      0 1px 2px rgba(20, 24, 29, .06);
  --pd-vari-2:    0 2px 4px rgba(20, 24, 29, .06), 0 12px 28px -14px rgba(20, 24, 29, .28);
  /* Kaardi pehme vari — annab ümaratele plokkidele sügavust ilma raamita. */
  --pd-vari-kaart: 0 1px 2px rgba(20, 24, 29, .04), 0 8px 24px -16px rgba(20, 24, 29, .35);

  /* --- Laius ----------------------------------------------------------- */
  --pd-laius:        74rem;   /* põhiruudustik */
  --pd-laius-kitsas: 42rem;   /* pikk tekst, ~68 märki */

  /* --- Liikumine ------------------------------------------------------- */
  --pd-kiire:  .14s cubic-bezier(.2, .8, .3, 1);
  --pd-keskm:  .24s cubic-bezier(.2, .8, .3, 1);

  /* --- Kihid ----------------------------------------------------------- */
  --pd-z-pais:   100;
  --pd-z-menuu:  200;
  --pd-z-modaal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --pd-kiire: 1ms; --pd-keskm: 1ms; }
}