/* ============================================================ TOKENII v2
 *
 * Directia: PLANSA.
 *
 * Hartie rece, cerneala aproape neagra, albastru de desen tehnic pentru
 * STRUCTURA (linii, axe, legaturi, mentiuni de sursa) si un singur rosu-semnal
 * cu amprenta sub 2% pentru accent. Vine din vocabularul subiectului -- schema
 * monofilara si harta de capacitate -- unde adnotarile sunt rosii si rare.
 *
 * Ce o desparte de „inca un dark mode": INSTRUMENTELE raman panouri intunecate
 * incastrate in pagina luminoasa. Harta, curba PZU si harta de caldura a
 * capacitatii se citesc pe fundal inchis fiindca sunt instrumente; restul
 * paginii e document, si documentele se citesc pe hartie. Vezi `.instrument`
 * mai jos: nu e o a doua paleta, e o rescriere de suprafata in acelasi set de
 * tokeni, deci orice componenta pusa inauntru se aseaza singura.
 *
 * De ce OKLCH si nu hex: verdele „valabil", chihlimbarul „expira" si rosul
 * „expirat" trebuie sa aiba aceeasi luminozitate perceputa cand stau unul sub
 * altul intr-o coloana de tabel. In hex asta se nimereste; in OKLCH se scrie.
 *
 * ------------------------------------------------------------------ REGULI
 * Trei constrangeri masurate, nu presupuse (raportul e fata de hartia pe care
 * cade textul, nu fata de token):
 *
 *   1. `--ink-faint` NU e o culoare de text. E pentru chenare stinse si
 *      pictograme dezactivate. Pe hartia principala da 3,1:1.
 *   2. Pe `--paper-slab` -- banda de subsol -- scriu doar `--ink` si
 *      `--ink-2`. `--ink-3` cade la 3,95:1 si `--state-warn` la 4,31:1.
 *   3. Culoarea de STARE nu se amesteca niciodata cu accentul. Verde, galben
 *      si rosu inseamna valabil / expira / expirat, si nimic altceva. Un tabel
 *      in care starea decoreaza devine pom de Craciun si nu se mai citeste.
 */

:root {
  /* Controalele native -- lista deschisa a unui `<select>`, cursorul dintr-un
   * camp, bara de derulare -- se picteaza de browser, nu de noi. Fara linia
   * asta raman pe tema sistemului si ies albe peste o pagina inchisa. */
  color-scheme: light;

  /* -------------------------------------------------- suprafata
   * Patru trepte. Hartia paginii nu e alba: albul e rezervat cardului
   * ridicat, ca sa se vada ca e ridicat fara sa fie nevoie de umbra.
   * Inclinatia e verde-albastruie si e aceeasi pe toate treptele, deci
   * suprafetele se simt din acelasi teanc de hartie. */
  --paper:          oklch(95.0% 0.005 215);
  --paper-raised:   oklch(99.5% 0.002 215);
  --paper-sunken:   oklch(92.5% 0.006 215);
  --paper-slab:     oklch(89.0% 0.008 215);

  /* Firul. Cerneala la opacitate mica, nu gri opac: peste orice treapta de
   * hartie da acelasi contrast relativ, deci un card ridicat si un rand
   * scufundat au granite la fel de vizibile. */
  --line:           oklch(21.0% 0.018 235 / 0.14);
  --line-strong:    oklch(21.0% 0.018 235 / 0.30);
  --line-faint:     oklch(21.0% 0.018 235 / 0.07);

  /* -------------------------------------------------- cerneala */
  --ink:            oklch(21.0% 0.018 235);
  --ink-2:          oklch(45.0% 0.016 232);
  --ink-3:          oklch(52.0% 0.014 230);
  --ink-faint:      oklch(62.0% 0.012 228);   /* nu e culoare de text */

  /* -------------------------------------------------- structura
   * Albastrul de plansa NU e accentul. E materialul din care sunt facute
   * liniile de diagrama, axele graficelor, legaturile dintre obiecte si
   * mentiunea „de unde stim asta". Are voie sa acopere mult; tocmai de-aia
   * nu are voie sa fie si accent. */
  --blue:           oklch(40.0% 0.090 245);
  --blue-ink:       oklch(99.0% 0.005 245);   /* text PE albastru */
  --blue-wash:      oklch(92.0% 0.022 240);
  --blue-line:      oklch(72.0% 0.055 243);

  /* -------------------------------------------------- accent
   * Un singur lucru per ecran. Butonul principal, sau starea care cere o
   * hotarare -- niciodata amandoua in acelasi cadru. Amprenta tinta: sub 2%
   * din pixelii colorati ai paginii. */
  --signal:         oklch(50.0% 0.170 35);
  --signal-hover:   oklch(44.0% 0.165 35);
  --signal-ink:     oklch(99.0% 0.008 35);    /* text PE semnal */
  --signal-wash:    oklch(94.0% 0.030 40);
  --signal-line:    oklch(72.0% 0.100 38);

  /* -------------------------------------------------- stare
   * Aceeasi luminozitate perceputa la toate trei, ca niciuna sa nu sara in
   * fata celorlalte intr-o coloana. Vezi regula 3 din capul fisierului. */
  --state-live:     oklch(46.0% 0.100 165);   /* valabil, publicat, viu */
  --state-warn:     oklch(50.5% 0.110  75);   /* expira, in verificare */
  --state-dead:     oklch(47.0% 0.150  27);   /* expirat, respins, retras */
  --state-idle:     oklch(52.0% 0.014 230);   /* ciorna, nerevendicat */

  --live-wash:      oklch(93.0% 0.030 165);
  --warn-wash:      oklch(94.0% 0.040  85);
  --dead-wash:      oklch(93.5% 0.030  27);

  /* -------------------------------------------------- litera
   * Trei roluri, trei familii, si o regula care face singura jumatate din
   * credibilitatea site-ului: TOT ce e citat dintr-un registru -- numar de
   * aviz, CUI, cod de statie, data unei editii -- se scrie monospatiat. */
  --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scara de corp. Doua baze, comutate de `data-density` pe <html>:
   *   ceremonie -> 16px, ca textul care convinge sa se citeasca linistit
   *   date      -> 14px, ca sa incapa treizeci de randuri pe ecran
   * Tot ce urmeaza e in `rem`, deci scara intreaga se muta cu baza. */
  --text-2xs:   0.6875rem;
  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.9375rem;
  --text-md:    1.0625rem;
  --text-lg:    1.1875rem;
  --text-xl:    1.4375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;
  --text-4xl:   2.875rem;
  --text-display: clamp(2.5rem, 5.5vw, 4rem);
  /* Cifra-erou. Singurul lucru din pagina care are voie sa fie enorm, si
   * numai unul per ecran. */
  --text-figure:  clamp(3.25rem, 9vw, 6.5rem);

  --leading-tight:  1.08;
  --leading-snug:   1.24;
  --leading-body:   1.6;

  --track-figure:  -0.035em;
  --track-display: -0.028em;
  --track-tight:   -0.014em;
  --track-label:    0.10em;

  /* -------------------------------------------------- spatiu
   * Scara de 4pt. Doar valorile de SECTIUNE se schimba intre densitati;
   * restul raman fixe, ca un buton si un cartonas sa fie identice pe tot
   * site-ul indiferent pe ce pagina stau. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  --space-section:   5.5rem;   /* rescris de data-density */
  --space-section-s: 3rem;
  --gutter:          1.75rem;
  --measure:         68ch;     /* latimea textului care se citeste */
  --shell:           1240px;

  /* -------------------------------------------------- forma
   * Colturi aproape drepte. O plansa tehnica n-are colturi rotunjite, si
   * `rounded-lg` peste tot e amprenta pe care o recunoaste oricine a vazut
   * zece site-uri generate. */
  --radius:      2px;
  --radius-sm:   1px;
  --radius-pill: 999px;

  --ring: 0 0 0 2px var(--signal);
  --lift: 0 1px 2px oklch(21% 0.018 235 / 0.06),
          0 12px 28px -18px oklch(21% 0.018 235 / 0.35);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================ DENSITATE
 *
 * Nu e o a doua paleta -- e o a doua scara de corp si de spatiu. Culoarea
 * ramane aceeasi intre cele doua, ca paginile sa se simta acelasi produs.
 * Comutatorul il pune `v2.shell.page()`, dupa tipul paginii, nu utilizatorul.
 */

html[data-density="ceremonie"] {
  font-size: 16px;
  --space-section:   5.5rem;
  --space-section-s: 3rem;
  --gutter:          1.75rem;
}

html[data-density="date"] {
  font-size: 14px;
  --space-section:   2.5rem;
  --space-section-s: 1.5rem;
  --gutter:          1.25rem;
}

/* ============================================================ INSTRUMENTUL
 *
 * Panoul intunecat incastrat: harta, curba PZU, harta de caldura. NU e o
 * tema -- e o suprafata. Rescrie tokenii de suprafata si de cerneala in
 * interiorul lui, deci orice componenta pusa inauntru se aseaza singura,
 * fara reguli scrise a doua oara.
 *
 * Ramane intunecat si cand pagina e pe tema intunecata: acolo se desparte de
 * hartia din jur prin treapta scufundata si prin firul de contur, nu prin
 * culoare. Instrumentul trebuie sa se vada ca e un obiect ASEZAT in pagina.
 */

.instrument {
  color-scheme: dark;
  --paper:          oklch(19.0% 0.014 232);
  --paper-raised:   oklch(23.5% 0.016 232);
  --paper-sunken:   oklch(15.5% 0.012 232);
  --paper-slab:     oklch(13.0% 0.010 232);

  --line:           oklch(100% 0 0 / 0.10);
  --line-strong:    oklch(100% 0 0 / 0.20);
  --line-faint:     oklch(100% 0 0 / 0.05);

  --ink:            oklch(93.0% 0.010 220);
  --ink-2:          oklch(76.0% 0.012 220);
  --ink-3:          oklch(62.0% 0.012 222);
  --ink-faint:      oklch(50.0% 0.012 222);

  --blue:           oklch(76.0% 0.075 240);
  --blue-ink:       oklch(15.0% 0.020 240);
  --blue-wash:      oklch(28.5% 0.045 240);
  --blue-line:      oklch(45.0% 0.060 242);

  --signal:         oklch(72.0% 0.150 40);
  --signal-hover:   oklch(78.0% 0.140 40);
  --signal-ink:     oklch(16.0% 0.040 35);
  --signal-wash:    oklch(28.0% 0.055 38);
  --signal-line:    oklch(45.0% 0.090 38);

  --state-live:     oklch(77.0% 0.130 165);
  --state-warn:     oklch(80.0% 0.120  80);
  --state-dead:     oklch(72.0% 0.145  25);
  --state-idle:     oklch(62.0% 0.012 222);

  --live-wash:      oklch(28.0% 0.045 165);
  --warn-wash:      oklch(29.0% 0.045  80);
  --dead-wash:      oklch(27.5% 0.050  25);

  --lift: 0 1px 2px oklch(0% 0 0 / 0.4), 0 12px 28px -18px oklch(0% 0 0 / 0.8);

  background: var(--paper);
  color: var(--ink);
}

/* ============================================================ TEMA INCHISA
 *
 * Comoditate, nu identitate. Aceiasi tokeni, alta hartie -- si accentul
 * ridicat in luminozitate ca sa ramana lizibil fara sa devina stridenta.
 *
 * Trei stari, nu doua: alegerea explicita stampileaza `data-theme` pe <html>,
 * iar starea implicita „sistem" nu stampileaza nimic. De-aia media query-ul e
 * pazit cu `:not([data-theme="light"])`: altfel o alegere explicita de tema
 * deschisa ar fi batuta de un sistem pe intuneric.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:          oklch(19.0% 0.014 232);
    --paper-raised:   oklch(23.5% 0.016 232);
    --paper-sunken:   oklch(15.5% 0.012 232);
    --paper-slab:     oklch(13.0% 0.010 232);

    --line:           oklch(100% 0 0 / 0.10);
    --line-strong:    oklch(100% 0 0 / 0.20);
    --line-faint:     oklch(100% 0 0 / 0.05);

    --ink:            oklch(93.0% 0.010 220);
    --ink-2:          oklch(76.0% 0.012 220);
    --ink-3:          oklch(62.0% 0.012 222);
    --ink-faint:      oklch(50.0% 0.012 222);

    --blue:           oklch(76.0% 0.075 240);
    --blue-ink:       oklch(15.0% 0.020 240);
    --blue-wash:      oklch(28.5% 0.045 240);
    --blue-line:      oklch(45.0% 0.060 242);

    --signal:         oklch(72.0% 0.150 40);
    --signal-hover:   oklch(78.0% 0.140 40);
    --signal-ink:     oklch(16.0% 0.040 35);
    --signal-wash:    oklch(28.0% 0.055 38);
    --signal-line:    oklch(45.0% 0.090 38);

    --state-live:     oklch(77.0% 0.130 165);
    --state-warn:     oklch(80.0% 0.120  80);
    --state-dead:     oklch(72.0% 0.145  25);
    --state-idle:     oklch(62.0% 0.012 222);

    --live-wash:      oklch(28.0% 0.045 165);
    --warn-wash:      oklch(29.0% 0.045  80);
    --dead-wash:      oklch(27.5% 0.050  25);

    --lift: 0 1px 2px oklch(0% 0 0 / 0.4), 0 12px 28px -18px oklch(0% 0 0 / 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:          oklch(19.0% 0.014 232);
  --paper-raised:   oklch(23.5% 0.016 232);
  --paper-sunken:   oklch(15.5% 0.012 232);
  --paper-slab:     oklch(13.0% 0.010 232);

  --line:           oklch(100% 0 0 / 0.10);
  --line-strong:    oklch(100% 0 0 / 0.20);
  --line-faint:     oklch(100% 0 0 / 0.05);

  --ink:            oklch(93.0% 0.010 220);
  --ink-2:          oklch(76.0% 0.012 220);
  --ink-3:          oklch(62.0% 0.012 222);
  --ink-faint:      oklch(50.0% 0.012 222);

  --blue:           oklch(76.0% 0.075 240);
  --blue-ink:       oklch(15.0% 0.020 240);
  --blue-wash:      oklch(28.5% 0.045 240);
  --blue-line:      oklch(45.0% 0.060 242);

  --signal:         oklch(72.0% 0.150 40);
  --signal-hover:   oklch(78.0% 0.140 40);
  --signal-ink:     oklch(16.0% 0.040 35);
  --signal-wash:    oklch(28.0% 0.055 38);
  --signal-line:    oklch(45.0% 0.090 38);

  --state-live:     oklch(77.0% 0.130 165);
  --state-warn:     oklch(80.0% 0.120  80);
  --state-dead:     oklch(72.0% 0.145  25);
  --state-idle:     oklch(62.0% 0.012 222);

  --live-wash:      oklch(28.0% 0.045 165);
  --warn-wash:      oklch(29.0% 0.045  80);
  --dead-wash:      oklch(27.5% 0.050  25);

  --lift: 0 1px 2px oklch(0% 0 0 / 0.4), 0 12px 28px -18px oklch(0% 0 0 / 0.8);
}