/* HiLTUS UI — tokenai
 *
 * Šaltinis: HiLTUS-identitetas_2023.pdf (p. 3). Keturios firminės spalvos yra
 * normatyvas ir nekeičiamos. Visa kita čia iš jų IŠVESTA — sąsajai reikia daugiau
 * reikšmių (nuorodos, ribos, būsenos), bet jos neįvedamos iš oro.
 *
 * Tema turi tris būsenas, ne dvi:
 *   - `data-theme="light"` / `data-theme="dark"` — aiškus vartotojo pasirinkimas,
 *   - nieko — numatytoji „sistemos" būsena, kurią skiria tik prefers-color-scheme.
 * Todėl pilna šviesi paletė yra ant plikos :root, o tamsi perrašoma DUKART.
 */

:root {
  /* ---- Firminės. NEKEISTI. ---------------------------------------------- */
  --hiltus-cyan: #02ABB4;
  --hiltus-green: #97C355;
  --hiltus-navy: #0A2E3F;
  --hiltus-ink: #121212;

  /* ---- Akcentas --------------------------------------------------------- */
  --accent: var(--hiltus-cyan);
  /* Tekstas ant akcento. NE #fff: baltas ant žydros yra 2,80:1 ir neatitinka
     WCAG AA. Tamsiai mėlyna duoda 5,07:1. */
  --accent-contrast: var(--hiltus-navy);
  /* Akcentinis TEKSTAS ant šviesaus fono — žydra per šviesi (2,80:1), todėl
     tamsinama. Ribą nustato ne baltas, o --accent-soft: ant jo fono tas pats
     tekstas duoda mažiau, ir ties #017F86 gaudavosi 4,34:1. Dabar 5,9:1 ant
     balto ir 5,4:1 ant akcento fono. */
  --accent-text: #016B71;
  /* Akcentinė PLONA LINIJA: kreivė, taškai, kryžiukas. Firminė žydra ant balto
     duoda 2,80:1 — mažiau už WCAG 1.4.11 reikalaujamus 3:1 grafiniam objektui,
     kuris vienintelis perteikia informaciją. Plotai ir perėjimai lieka
     firminiai: ten spalva ne vienintelis ženklas. */
  --accent-line: var(--accent-text);
  --accent-soft: #e6f7f8;
  --accent-border: #9fdfe3;

  /* ---- Antrinis akcentas ------------------------------------------------ */
  --brand-green: var(--hiltus-green);
  --brand-green-text: #5A7C2B;   /* 4,82:1 ant balto */

  /* ---- Paviršiai ir tekstas --------------------------------------------- */
  --bg: #f7f9f9;
  --surface: #ffffff;
  --surface-2: #eef3f3;
  --surface-hover: #e7f1f2;
  --ink: var(--hiltus-ink);
  --muted: #5a6b6e;
  --faint: #8194971a;
  --line: #dde5e6;
  /* Valdiklio riba (laukas, jungiklis, nulio ašis) NEŠA informaciją, tad jai
     galioja 3:1, o ne „plona pilka linija". Ankstesnis #c3d0d2 davė 1,58:1. */
  --line-strong: #6f8487;

  /* Sklaidos juosta ir perėjimas po kreive — VIENOJE vietoje, kad legendos
     kvadratėlis rodytų tai, kas tikrai nupiešta. Juosta stipresnė ir su
     kontūru, perėjimas silpnesnis: tas pats atspalvis dviem dalykams reiškia,
     kad vieno iš jų nesimato (1,21:1). */
  --band-op: .3;
  --fill-op: .1;

  /* ---- Funkcinės būsenos ------------------------------------------------
     Identitetas jų nenumato — jos ne firminės. Dvi ribos išplaukia iš jo:
     sėkmei NEGALIMA naudoti --hiltus-green (ji yra ženklo dalis), o
     informacinės mėlynos geriau nedėti — šalia žydros ji atrodo kaip antras
     akcentas ir su juo konkuruoja. Informaciniam pabrėžimui yra navy. */
  --success: #1f7a4c;
  --success-soft: #e6f4ec;
  /* 5,4:1 ant balto ir 4,9:1 ant --warn-soft. Ankstesnis #b4700a davė 3,99:1
     ir 3,63:1 — įspėjimas buvo sunkiau įskaitomas už įprastą tekstą. */
  --warn: #8f5a08;
  --warn-soft: #fdf3e2;
  --danger: #c4352e;
  --danger-soft: #fbeceb;

  /* ---- Kreivių paletė ---------------------------------------------------
     Kai grafike kelios kreivės, jų spalvos turi SKIRTIS, o ne derėti — čia
     spalva yra duomenų raktas, ne dekoracija. Todėl šios nėra firminės ir
     nebando jomis atrodyti. Pirmoji kreivė visada yra --accent (firminė žydra),
     o šios eina tik nuo antros. Šešios: daugiau kreivių viename grafike žmogus
     vis tiek nebeatskiria. */
  --series-1: #e0813d;
  --series-2: #8a63d2;
  --series-3: #d43f8f;
  --series-4: #3d8fe0;
  --series-5: #6aa84f;
  --series-6: #c9a227;

  /* ---- Forma ------------------------------------------------------------ */
  /* HiLTUS forma kampuota. Identitetas didelio apvalinimo nenumato, o 10 px
     kortelės buvo tiesioginis nukrypimas nuo jo. */
  --r: 3px;
  --r-sm: 2px;
  --r-pill: 999px;
  --sh: 0 1px 2px rgb(10 46 63 / 6%);
  --sh-lift: 0 4px 16px rgb(10 46 63 / 10%);

  /* ---- Tarpai. Viena skalė visoms sistemoms. ---------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  /* Šoninis tarpas niekada nemažesnis — ir telefone. */
  --gutter: 16px;
  /* Minimalus paspaudimo laukas. Pirštas nėra pelė. */
  --touch: 44px;

  /* ---- Šriftas ----------------------------------------------------------
     Work Sans — firminis. Arial — identiteto PATVIRTINTA atsarga, o ne
     „kažkoks sans-serif". Monospace identitete nenumatytas, tad sisteminis. */
  --font: "Work Sans", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  /* Mažiausias laiptelis — tik didžiosiomis rašomoms žymėms. Įprastam tekstui
     jis per mažas, todėl skalė nuo --fs-xs ir pradedama. */
  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  color-scheme: light dark;
}

/* Naršyklės valdikliai (varnelė, datos laukas, slinkties juosta) seka
   `color-scheme`, ne mūsų tokenus. `light dark` be šių eilučių reiškia, kad
   pasirinkus šviesią temą tamsioje OS varnelės nupiešiamos tamsiais
   kvadratais ant balto — atrodo kaip pažymėtos. Aiškus pasirinkimas
   nugali OS (0.8.6). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Tamsi tema — tik tokenai, niekada komponentų taisyklės.
   Guard'as `:not([data-theme="light"])`: aiškiai pasirinkta šviesi tema turi
   nugalėti tamsią operacinę sistemą. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-text: #2FC4CC;        /* 6,70:1 ant navy */
    /* Tamsioje firminė žydra ant navy duoda 5,5:1 — kreivė lieka firminė. */
    --accent-line: var(--accent);
    --accent-soft: #10343a;
    --accent-border: #1d5560;
    --brand-green-text: #A8D166;

    --bg: #071f2a;
    --surface: var(--hiltus-navy);
    --surface-2: #0e3b50;
    --surface-hover: #12475f;
    --ink: #e8eef0;
    --muted: #9ab3bb;
    --line: #1c4759;
    --line-strong: #5b90a8;
    --band-op: .36;
    --fill-op: .12;

    --success: #5cc583;
    --success-soft: #11321f;
    --warn: #e0a94e;
    --warn-soft: #33260f;
    --danger: #f0827a;
    --danger-soft: #3a1b19;

    --sh: 0 1px 2px rgb(0 0 0 / 45%);
    --sh-lift: 0 4px 16px rgb(0 0 0 / 50%);
  }
}

/* Tas pats dar kartą — kad perjungiklis nugalėtų ir šviesią operacinę sistemą. */
:root[data-theme="dark"] {
  --accent-text: #2FC4CC;        /* 6,70:1 ant navy */
  --accent-line: var(--accent);
  --accent-soft: #10343a;
  --accent-border: #1d5560;
  --brand-green-text: #A8D166;

  --bg: #071f2a;
  --surface: var(--hiltus-navy);
  --surface-2: #0e3b50;
  --surface-hover: #12475f;
  --ink: #e8eef0;
  --muted: #9ab3bb;
  --line: #1c4759;
  --line-strong: #5b90a8;
  --band-op: .36;
  --fill-op: .12;

  --success: #5cc583;
  --success-soft: #11321f;
  --warn: #e0a94e;
  --warn-soft: #33260f;
  --danger: #f0827a;
  --danger-soft: #3a1b19;

  --sh: 0 1px 2px rgb(0 0 0 / 45%);
  --sh-lift: 0 4px 16px rgb(0 0 0 / 50%);
}

/* ---- Sistemų spalvos (0.9.0) ------------------------------------------------
   Kiekviena sistema turi savo spalvą, kad augant jų skaičiui jos skirtųsi iš
   pirmo žvilgsnio. Spalva žymi, KURIOJE sistemoje esi (ar apie kurią sistemą
   kalbama — plytelė, ženkliukas, filtras), o ne kas ekrane svarbu: akcentas
   lieka firminė žydra ir su sistemos spalva nekonkuruoja.

   Kiekvienai sistemai trys tokenai:
     --sys-<kodas>       užpildas (kvadratas, juostelė, taškas); abiejose temose tas pats
     --sys-<kodas>-on    tekstas ant užpildo: baltas, išskyrus gelsvą ir žydrą —
                         ant jų baltas neįskaitomas, tad tamsiai mėlyna
     --sys-<kodas>-text  sistemos spalvos TEKSTAS ant paviršiaus: ≥4,5:1, todėl
                         tamsiai temai perrašomas žemiau
   Naudojama dvejopai: tiesiogiai (`color: var(--sys-lex-text)`) arba per
   `data-sys="lex"`, kuris elementui ir jo vaikams duoda bendrinius
   --sys / --sys-on / --sys-text (taip daro `.hi-nav`). */
:root {
  --sys-adm: var(--hiltus-cyan); --sys-adm-on: var(--hiltus-navy); --sys-adm-text: #01747A;
  --sys-fin: #1F8A4C;            --sys-fin-on: #fff;               --sys-fin-text: #1F7A45;
  --sys-lex: #D2443A;            --sys-lex-on: #fff;               --sys-lex-text: #B8322A;
  --sys-tdp: #3C78D8;            --sys-tdp-on: #fff;               --sys-tdp-text: #2D63C0;
  --sys-con: #8456D1;            --sys-con-on: #fff;               --sys-con-text: #7044BF;
  --sys-dss: #E8B820;            --sys-dss-on: var(--hiltus-navy); --sys-dss-text: #8A6A00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sys-adm-text: #2FC4CC; --sys-fin-text: #5CC98A; --sys-lex-text: #F48A80;
    --sys-tdp-text: #7FA9F0; --sys-con-text: #B595EE; --sys-dss-text: #F2CD52;
  }
}
:root[data-theme="dark"] {
  --sys-adm-text: #2FC4CC; --sys-fin-text: #5CC98A; --sys-lex-text: #F48A80;
  --sys-tdp-text: #7FA9F0; --sys-con-text: #B595EE; --sys-dss-text: #F2CD52;
}
[data-sys="adm"] { --sys: var(--sys-adm); --sys-on: var(--sys-adm-on); --sys-text: var(--sys-adm-text); }
[data-sys="fin"] { --sys: var(--sys-fin); --sys-on: var(--sys-fin-on); --sys-text: var(--sys-fin-text); }
[data-sys="lex"] { --sys: var(--sys-lex); --sys-on: var(--sys-lex-on); --sys-text: var(--sys-lex-text); }
[data-sys="tdp"] { --sys: var(--sys-tdp); --sys-on: var(--sys-tdp-on); --sys-text: var(--sys-tdp-text); }
[data-sys="con"] { --sys: var(--sys-con); --sys-on: var(--sys-con-on); --sys-text: var(--sys-con-text); }
[data-sys="dss"] { --sys: var(--sys-dss); --sys-on: var(--sys-dss-on); --sys-text: var(--sys-dss-text); }