/* ============================================================================
   DAGÓ 2.0 — tokens.css
   EZ AZ EGYETLEN FÁJL, AMIBEN SZÍNLITERÁL SZEREPELHET.
   Máshol (css, js, svg) egyetlen hexa/rgb/hsl érték sem lehet — az `npm run verify`
   ellenőrzi. Indok: a mai dagó 16 beégetett színéből MIND A 16 megbukik
   olvashatóságon világos felületen (docs/TERV-DAGO-2.md 7.).

   TÉMA (2026-10-12): SÖTÉT + BOROSTYÁN — a tulaj makettjei (PKTOK-Dago-Part-1.zip) az új konzol (/console-uj/)
   arculatát hozzák a dagóba. Ez FELÜLÍRJA a 2026-09-09-i „csak világos" döntést; a szerkezet változatlan,
   csak az értékek: minden --x-ink a SÖTÉT felületen olvasható (≥4,5:1), a --x grafikus (≥3:1).
   Korábban: CSAK VILÁGOS (tulaj-döntés, 2026-09-09: „a sötét megjelenés nem is kell").
   Minden szín tokenen keresztül megy, ezért a sötét téma később EGYETLEN
   `:root[data-theme="dark"]` blokkal hozzáadható — semmit nem kell újraírni.
   Ezért van `color-scheme: light` is: enélkül a rendszer-sötétben lévő gépen a
   böngésző saját sötét űrlapelemeket rajzolna a világos felületre.

   FORMA: a „B · Csempés" irány (tulaj választása a látványtervről): nagy csempék,
   nagy számok, vastagabb keret, NULLA árnyék, színnel megmosott kártyák.
   ========================================================================== */
@layer tokens {

:root {
  color-scheme: dark;

  /* ── Felületek — „Meleg Nappal” ───────────────────────────────────────────
     Sehol nincs tiszta fehér, és a háttér szándékosan sötétebb, mint a 2026-07-18-án
     ELUTASÍTOTT „Clear Blue” (#f4f6f9): a képernyő ~70%-a a háttér, ezért az adja a
     glare nagy részét. Ez a −11% fénykibocsátás a lényegi különbség. */
  --bg:        #0f1318;
  --bg-2:      #12171d;
  --panel:     #161c23;
  --surface:   #1c232b;
  --surface-2: #232b34;
  --line:      #252d37;
  --line-2:    #2e3741;
  --line-3:    #3c4652;

  --text:    #f3f6f9;   /* 11,75:1 a panelen — 2,6× az AA-előírás, halation nélkül */
  --muted:   #a7b0b9;   /* 6,25:1 — testszövegre is jó */
  --muted-2: #7d8791;   /* 3,85:1 — CSAK dísz/ikon/tiltott állapot, olvasandó szöveg SOHA */
  --on-accent: #15110a;

  /* ── 12 funkciószín, kétváltozósan ────────────────────────────────────────
     --x     = grafikus (oszlop, pötty, keret, kitöltés)     ≥3:1 a háttérhez
     --x-ink = szöveg (jelvény, link, tömör gomb háttere)    ≥4,5:1 minden felületen
     A CSS SOHA nem választ közülük: a komponens tudja, melyiket kéri. Ez zárja ki
     a klasszikus bukást — a mai arany (#f5b83d) világos háttéren 1,75:1. */
  --indigo: #7d8cff;  --indigo-ink: #a9b3ff;
  --green:  #2fbf7f;  --green-ink:  #5fd9a0;
  --coral:  #ef5b78;  --coral-ink:  #ff8ea3;
  --gold:   #f7af21;  --gold-ink:   #ffc75c;
  --purple: #a383f2;  --purple-ink: #c4aeff;
  --cyan:   #33b6d8;  --cyan-ink:   #74d2ec;
  --amber:  #f7af21;  --amber-ink:  #ffc75c;  /* API-keretek (2026-10-11) — egy szín = egy oldal */
  --pink:   #f06aa9;  --pink-ink:   #ff9fca;
  --orange: #f08b3e;  --orange-ink: #ffae73;
  --moss:   #a4bd3e;  --moss-ink:   #c3d968;
  --teal:   #2fc2bf;  --teal-ink:   #70dcda;
  --plum:   #c46fe0;  --plum-ink:   #dd9ff1;
  --slate:  #8a9aae;  --slate-ink:  #b6c2d0;
  /* 13. szín (2026-09-10): Kiadások — tégla. A szomszédos Fizetés (zöld) és Forgalom (cián)
     oldaltól >140°-ra; a téglát a korall/narancstól a sötétebb, tompább tónus választja el. */
  --brick:  #e2734f;  --brick-ink:  #ff9d7e;
  /* 14. szín (2026-09-27): Zenék — égkék. A cián (195°) és az indigó (233°) közti rés (≈210°),
     sötétebb tónussal, hogy a kettőtől elváljon; fehéren ≥3:1 (grafika) és az ink ≥4,5:1. */
  --sky:    #4f9df0;  --sky-ink:    #90c2ff;
  /* 15. szín (2026-09-30): Posztok — páfrány. A zöld (160°) és a moha (75°) közti rés (≈115°),
     fehéren ≥3:1 (grafika) és az ink ≥4,5:1. */
  --fern:   #66c257;  --fern-ink:   #96dc89;
  /* 16. szín (2026-10-11): Statisztika — bíbor. A szilva (285°) és a rózsaszín (330°) közti rés (≈310°), sötétebb
     tónussal; fehéren 5,5:1 (grafika és szöveg is), az ink ≥7:1. */
  --magenta: #de5bc6; --magenta-ink: #f397e0;
  /* 17. szín (2026-10-11): Értesítések — tengerkék. Sötétebb és tompább, mint az égkék (210°) és az indigó (233°), a
     kettő közé (≈221°); fehéren ~7,8:1 (grafika és szöveg is), az ink ≥10:1. */
  --navy:    #7392dc; --navy-ink:    #a7bbee;
  /* 18. szín (2026-10-14): Ügynökségek — óceán. A cián (195°) és az égkék (210°) közé, sötétebb, zöldesebb tónussal
     (≈200°), hogy mindkettőtől elváljon; fehéren ≥3:1 (grafika), az ink ≥4,5:1. */
  --ocean:   #3f9bb5; --ocean-ink:   #7fc4d8;

  /* ── Állapotszínek — SOHA nem az oldal funkciószíne ───────────────────────
     Az Egészség oldalon a „minden rendben” nem azért zöld, mert az oldal zöld. */
  --ok:      var(--green);  --ok-ink:      var(--green-ink);
  --warn:    var(--gold);   --warn-ink:    var(--gold-ink);
  --danger:  var(--coral);  --danger-ink:  var(--coral-ink);
  --info:    var(--indigo); --info-ink:    var(--indigo-ink);
  --neutral: var(--slate);  --neutral-ink: var(--slate-ink);

  /* Harmadik felek márkaszíne — CSAK logóra/pöttyre, kitöltésre soha. */
  --brand-fb: #1877f2; --brand-fb-ink: #7fb0ff;

  /* Videó-előnézet (2026-09-28). A panel világos, de egy VIDEÓ doboza sötét: a klipek a falon és
     az adásban sötét háttér előtt mennek, és világos dobozban a zöld hátterű kép is vakítana.
     A név a falon fehér, sötét árnyékkal (public/overlay/video.css) — a minta ugyanezt mutatja. */
  --video-bg:     #05070b;
  --video-ink:    #ffffff;
  --video-shadow: rgba(0, 0, 0, .85);
  --video-chip:   rgba(5, 7, 11, .72);

  /* ── Forma: „B · Csempés” ─────────────────────────────────────────────── */
  --r-lg: 12px;                    /* 2026-10-12: a makettek szögletesebbek (új konzol) */
  --r:    10px;
  --r-sm: 7px;
  --r-pill: 999px;
  --bd: 1px;                       /* 2026-10-12: vékony, sötét keret — a makettek szerint */
  --tile-wash: 8%;                 /* a csempe színmosásának erőssége */

  /* Árnyék: a B irány LAPOS. A tokenek megvannak, hogy a dialógus és a lebegő
     elemek (toast, alsó lap) kapjanak mélységet — a kártyák nem. */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
  --sh-3: 0 10px 24px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --backdrop: rgba(0, 0, 0, .6);

  /* ── Méret és ritmus ──────────────────────────────────────────────────────
     A mobil értékek NEM itt, hanem a komponensnél élnek (docs/TERV-DAGO-2.md 6.7:
     „a mobil stílus a komponensé, nem a fájl végéé”). */
  --h-sm: 32px;
  --h:    40px;
  --h-lg: 48px;
  --row-h: 52px;
  --card-pad: 22px;
  --page-pad: 28px;
  --gap: 14px;
  --sidenav-w: 236px;

  /* ── Tipográfia ───────────────────────────────────────────────────────────
     A két betűtípus a PKTOK meglévő rendszeréé (konzol + mai dagó) — nem új döntés.
     A Tabler ikon-webfontot ELHAGYJUK: helyette helyi SVG-készlet, mert egy nem
     betöltődő ikonfont NÉMÁN üres gombokat ad. */
  --font-head: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-eyebrow: 11px;
  --fs-micro:   12px;
  --fs-small:   13px;
  --fs-body:    16px;   /* mobil-első: 16px alatt az iOS Safari fókuszkor ráközelít */
  --fs-card:    17px;
  --fs-h2:      19px;
  --fs-h1:      30px;   /* 2026-10-12: nagy, nagybetűs, keskeny cím (Barlow Condensed) */
  --fs-kpi:     34px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* Az oldal funkciószíne. Minden oldal felülírja a saját gyökerén; ez csak az
     alapérték, hogy a héj (belépő, hibaképernyő) se maradjon szín nélkül. */
  --fn: var(--amber);
  --fn-ink: var(--amber-ink);
}

/* Asztali gépen sűrűbb: több fér ki, és nincs érintési cél-kényszer. */
@media (min-width: 1080px) {
  :root {
    --fs-body: 15px;
    --fs-h1: 46px;
    --h: 38px;
    --row-h: 48px;
    --gap: 16px;
  }
}

}