/* Agenttinen Katakri — design-tokenit
 * Lähde: Apex Design System 2.2 (apex-design-system-9ea36cb6: tokens/tokens.css
 * + semantic.css), Claude Design -luovutus "Kierros 8".
 * EI ULKOISIA VIITTAUKSIA — ei @import, ei CDN, ei verkkokutsuja. Air-gapped-turvallinen.
 * Sijoitus: src/katakri_core/views/static/katakri/tokens.css
 *
 * TOKENISTOJA ON YKSI. Tiedostossa oli kahden vuoden ajan kaksi `:root`-lohkoa:
 * ylempi Meshly Design Systemin ja alempi Apexin. Apex-migraatio (tehtävät
 * 02–14) siirsi sivun kerrallaan jälkimmäiselle, ja tehtävä 24cd5d6c poisti
 * Meshly-lohkon kokonaan, kun mittaus (`tests/test_ui_meshly_tokenit.py`)
 * näytti nollan kaikilla 33 kytketyllä sivulla.
 *
 * Meshly-nimien paluu on KIELLETTY mitattuna:
 * `tests/test_ui_ylikirjoitusrajat.py::test_poistetut_meshly_tokenit_eivat_palaa`
 * luettelee poistetut nimet ja hylkää jokaisen, joka ilmaantuu uudelleen
 * ytimen tyylitiedostoihin tai React-nipun CSS:ään.
 *
 * Tiedosto on kaksiosainen:
 *
 *   1. APEX 2.2 — vendoroitu tokenjoukko ja sen semanttiset aliakset.
 *      Apexin oma semantic.css sanoo "Base names stay the source of truth",
 *      eli peruskantainen nimi (--card, --ink-2) on aina kelvollinen; alias
 *      on luettavuutta varten.
 *   2. YTIMEN ASTEIKKO — ne nimet, joille Apexilla EI ole vastinetta:
 *      typografian asteikko, välistys, kulmat, reunapaksuudet, kehikon
 *      mitat ja `--font-mono`. Nämä EIVÄT ole Meshly-tokeneita vaan ytimen
 *      omia; ne olivat Meshly-lohkossa vain siksi, että lohko oli ytimen
 *      ainoa tokenitiedosto. Arvot ovat samat kuin ennen poistoa, joten
 *      yhdenkään säännön mitta ei muutu.
 *
 * Kirjainperheet: Inter (--font-sans) on Apexin oma perhe ja JetBrains Mono
 * (--font-mono) ytimen oma. Kumpikin on vendoroitu fonts/-hakemistoon ja
 * julistettu fonts.css:ssä; alkuperäkirjanpito on docs/ui/kierros-3/fontit
 * (SHA256SUMS + _manifest.json). Apexilla --font-mono on pelkkä
 * järjestelmäpino, eikä sitä oteta: tiivisteet ja sormenjäljet luetaan merkki
 * kerrallaan, ja vendoroitu monospace on se, joka erottaa 0/O ja 1/l.
 */
:root {
  /* ================= 1. Apex Design System 2.2 ================= */

  /* ---- Tumma shell-paneeli ja sen teksti ---- */
  --shell-1:#1b1e24; --shell-2:#262a32; --shell-3:#323742;
  --shell-line:rgba(255,255,255,.09);
  --on-shell:#ffffff; --on-shell-2:#c3c8d1; --on-shell-3:#939aa6;

  /* ---- Vaalea pinta ja muste ---- */
  --page:#f4f5f7; --card:#ffffff; --row-hover:#f8f9fb; --sunken:#eff1f4;
  --overlay:rgba(21,24,29,.55);
  --ink-1:#15181d; --ink-2:#3a404a; --ink-3:#626b78; --ink-4:#68717d;
  --line-1:#e3e6ea; --line-2:#878f9b;

  /* ---- Aksentti (indigo) ---- */
  --accent:#4b57c8; --accent-hover:#3b46a8; --accent-press:#2f3888;
  --accent-soft:#e7e9f8; --accent-softer:#f3f4fc; --accent-ink:#333c8c;
  --accent-on-dark:#8e99f0; --accent-halo:rgba(75,87,200,.22);
  --accent-soft-hover:#dadef5;

  /* ---- Toinen aksentti (meripihka) ---- */
  --accent2:#c8811c; --accent2-soft:#faeeda; --accent2-ink:#7a4e08;
  --accent2-on-dark:#f0b44e; --accent2-border:#ebd3a4;

  /* ---- Tilat ---- */
  --pos:#14795a; --pos-soft:#dcf1e9; --pos-ink:#0b4e3a;
  --neg:#c0453f; --neg-soft:#fbe4e3; --neg-ink:#8a2b26; --neg-border:#f2c4c2;
  --warn:#b4741a; --warn-soft:#faeedc;
  --toast-icon:#7fe0b8;

  /* ---- Kuvaajat ---- */
  --series-1:var(--accent); --series-2:var(--accent2); --series-3:var(--pos);
  --series-4:#8e4585; --series-5:#5c6878;
  --chart-grid:#e7eaef; --chart-axis:var(--ink-4); --chart-divider:#cbd2db;
  --chart-band:rgba(75,87,200,.07);

  /* ---- Välistys, kulmat, varjot (Apexin oma asteikko) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(21,24,29,.05), 0 2px 8px rgba(21,24,29,.04);
  --sh-pop:0 4px 16px rgba(21,24,29,.12);
  --sh-modal:0 16px 40px rgba(21,24,29,.20), 0 2px 8px rgba(21,24,29,.08);

  /* ---- Asettelu ---- */
  --nav-w:264px; --nav-w-min:72px; --top-h:64px;

  /* ---- Typografia ---- */
  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ---- Apexin semanttiset aliakset — viittaa NÄIHIN komponenteissa ----
     Neljä alla olevaa pintaa ja tekstiä (--surface-page, --surface-card,
     --surface-sunken, --text-body) jätettiin tieten määrittelemättä niin
     kauan kuin Meshly-lohko omisti nimet. Lohko on poissa, joten aliakset
     on määritelty tässä Apexin peruskantaisille nimille — se säilyttää
     jokaisen `var(--surface-card)`-viittauksen ennallaan mutta antaa sille
     Apexin arvon. */
  --surface-page:var(--page); --surface-card:var(--card);
  --surface-sunken:var(--sunken); --text-body:var(--ink-2);

  --surface-shell:var(--shell-1); --surface-shell-active:var(--shell-3);
  --surface-hover:var(--row-hover);
  --text-heading:var(--ink-1); --text-label:var(--ink-3); --text-hint:var(--ink-4);
  --text-on-shell:var(--on-shell);
  --border-divider:var(--line-1); --border-control:var(--line-2);
  --action-primary:var(--accent); --action-primary-hover:var(--accent-hover);
  --focus-ring:var(--accent);
  --attention:var(--accent2);
  --status-pos:var(--pos); --status-neg:var(--neg); --status-warn:var(--warn);
  --duration-fast:120ms; --duration-base:180ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);

  /* Fokusrengas Apexin aksentilla. Ytimen oma lisäys, ei Apexin tokeni:
     Apexin components.css kirjoittaa saman renkaan literaalina jokaiseen
     `:focus-visible`-sääntöön (`0 0 0 3px var(--accent-halo)`), ja ytimessä
     se on tokeni, jotta asiakas saa ylikirjoittaa KOKO renkaan — ei vain sen
     väriä. `katakri.css`:n luokaton `:focus-visible` lukee tämän. */
  --shadow-focus-accent:0 0 0 3px var(--accent-halo);

  /* ================= 2. Ytimen asteikko ================= *
   * Apexilla ei ole typografian asteikkoa, välistystä, kulmia eikä
   * reunapaksuuksia tokeneina siinä muodossa, jossa `katakri.css` niitä
   * lukee: Apexin oma asteikko (--s1..--s7, --r-sm..--r-pill) on eri
   * porrastus ja jää yllä olevaan lohkoon vendoroituna. Nämä nimet ovat
   * ytimen omia ja säilyvät sellaisinaan. */

  /* ---- Kirjainperhe, jota Apexilla ei ole ---- */
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'DejaVu Sans Mono', Consolas, monospace;

  /* ---- Kirjainpaino ---- */
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;

  /* ---- Kirjainkoko ---- */
  --text-display-2xl:76px; --text-display-xl:60px; --text-display-lg:46px; --text-display-md:36px;
  --text-h1:30px; --text-h2:24px; --text-h3:20px; --text-h4:17px;
  --text-body-lg:18px; --text-body-md:15px; --text-body-sm:13px;
  --text-caption:12px; --text-overline:11px;

  /* ---- Riviväli ja kirjainväli ---- */
  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-normal:0em;
  --tracking-wide:0.04em; --tracking-label:0.12em;

  /* ---- Välistys — 4px perusyksikkö ---- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* ---- Kulmat ---- */
  --radius-none:0; --radius-xs:3px; --radius-sm:5px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;

  /* ---- Reunapaksuudet ---- */
  --border-hairline:1px; --border-medium:1.5px; --border-thick:2px;

  /* ---- Kehikon mitat ----
     Navigaation leveys on mitattu suunnittelupaketin kuvista eika arvioitu:
     tumma palsta vaihtuu varista (27,30,36) kuvapisteessa 526 jokaisessa
     kolmessa kuvassa (p5-1, p5-2, p5-3; 2880 px = 1440 px:n tyotila 2x), eli
     263 CSS-pikselissa. Arvo on 264, koska 263 on pariton eika puolikas
     kuvapiste ole mitattavissa 2x-kuvasta. Ennen 236 px. Sama luku on Apexin
     `--nav-w`:ssa; ydin pitaa oman nimensa, koska kapean nayton saanto
     kaventaa navin 58 px:iin eika Apexin `--nav-w-min` (72px) vastaa sita. */
  /* Ylarivin korkeus on mitattu kierroksen 8 kuvista eika arvioitu: musta
     palkki vaihtuu sivun pintaan (244,245,247) kuvapisteessa 65 kuvissa
     p16-1 ja p17-1 (1440 px = 1x), eli palkki on 64 px + hiusviivan verran
     pyoristysta. Sama luku on Apexin `--top-h`:ssa ja sen oma handoff
     sanoo sen sanoina (`design/_ds/.../readme.md`: "top bar 64px"). Ennen
     60 px, joka oli arvio siita ajalta, kun rivi oli vaalea ja kapea. */
  --katakri-nav-width:264px; --katakri-agentti-width:336px; --header-height:64px;
}