/* ============================================================================
   Ella — KÖZÖS design-token-forrás (IBM Carbon DS + Works-márka).
   EGYETLEN igazságforrás a színekhez, tipográfiához, eltartásokhoz.
   Minden modul ezt linkeli:  <link rel="stylesheet" href="/tokens.css">
   Élő katalógus: /design.html  (az „Alkalmazások" menüből is elérhető).
   ============================================================================ */
:root {
  /* — Márka (Works-piros) — az elsődleges/interaktív szín, a Carbon-kék helyett — */
  --brand: #E73352;
  --brand-hover: #d9304d;
  --brand-active: #b3283f;
  --brand-soft: #fde8ec;     /* halvány háttér (kiemelt sor, chip) */
  --brand-soft-border: #f7c5d0; /* a halvány márka-háttér kerete (pl. fork-sáv, idézet) */
  --tag-bg: #C0C5F6;         /* jegyzet-CÍMKE (chip) háttere — halvány periwinkle (user 2026-07-06; a #949EF1-ről halványítva) */
  --tag-bg-soft: #EEF0FC;    /* a --tag-bg HALVÁNY változata — a jegyzet-SZERKESZTŐ sor háttér-hangolása (user 2026-07-06, „3. opció": a chipek lila családjából, hogy ne keveredjen) */

  /* — Szürkék — Carbon Gray-skála — */
  --text: #161616;           /* Gray 100 — fő szöveg, címek */
  --text-strong: #393939;    /* Gray 80  — erős/hangsúlyos szöveg, másodlagos gomb */
  --text-2: #525252;         /* Gray 70  — másodlagos szöveg */
  --text-3: #6f6f6f;         /* Gray 60  — halvány, meta */
  --border: #e0e0e0;         /* Gray 20  — vonalak, keret */
  --border-strong: #8d8d8d;  /* Gray 50  — hangsúlyos keret */
  --icon-disabled: #c6c6c6;  /* Gray 30  — inaktív/üres ikon (pl. nem-kedvenc csillag) */
  --text-disabled: #a8a8a8;  /* Gray 40  — halvány szöveg / elválasztó „·" */
  --bg: #f4f4f4;             /* Gray 10  — oldal háttere */
  --surface: #ffffff;        /* felület — kártya, panel */
  --surface-2: #fafafa;      /* halvány felület — sor-hover */

  /* — Szemantikus (Carbon) — fő szín · sötét szöveg-szín · halvány háttér (badge/notif) — */
  --success: #24a148;
  --success-text: #0e6027;
  --success-soft: #defbe6;
  --danger: #da1e28;
  --danger-text: #a2191f;
  --danger-soft: #fff1f1;
  --warning: #f1c21b;
  --warning-text: #8e6a00;
  --warning-soft: #fcf4d6;
  --info: #0043ce;           /* Carbon Blue 60 — infó szöveg/keret */
  --info-soft: #edf5ff;      /* halvány infó-háttér */
  --busy: #a8a8a8;           /* Gray 40 — „foglalt / nem elérhető" idősáv (pl. Scheduler-rács más naptárból) */
  --busy-soft: #e8e8e8;      /* halvány „foglalt" tint (a sáv belseje / jelmagyarázat) */

  /* — Kiemelés (szövegkiemelő / mark) — */
  --highlight-bg: #fff3b0;       /* sárga kiemelés háttér */
  --highlight-border: #e0a800;   /* sárga kiemelés szegély */

  /* — Kategorikus paletta (megkülönböztető színek: ágak, klaszterek, címkék — NEM szemantikus) — */
  --cat-1: #8a3ffc;          /* lila */
  --cat-2: #007d79;          /* türkiz */
  --cat-3: #ee5396;          /* magenta */
  --cat-4: #b28600;          /* arany */
  --cat-5: #1192e8;          /* cián */
  --cat-6: #fa4d56;          /* piros */

  /* — Tipográfia — */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* A méretek a CARBON TYPE-RÁCSON (12/14/16/20/24…, IBM Plex-re optimalizálva) — 2026-07-05 DS-audit:
     a korábbi köztes értékek (.85/.9/1.05/.78/.8rem) rácsra pattintva. Carbon-megfeleltetés kommentben. */
  --fs-h1: 1.5rem;           /* 24px — modul-cím (Docs.) ~ heading-04 környéke */
  --fs-section: 1rem;        /* 16px — szakaszcím (súly adja a hierarchiát) ~ heading-02 */
  --fs-body: 1rem;           /* 16px — törzsszöveg ~ body-02 */
  --fs-small: 0.875rem;      /* 14px — apró, meta ~ body-01 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.3;           /* címek, tömör sorok */
  --lh-body: 1.5;            /* törzsszöveg (Carbon-közeli) */
  --lh-relaxed: 1.6;         /* hosszabb olvasószöveg */

  /* — Táblázat (Docs + Scheduler KÖZÖS spec) — a fej/cella/meta MÉRET innen; mindkét modul ezt fogyassza, ne hardcode-oljon. Szín: fej=--text-2, cella=--text, meta=--text-3; súly: fej=--fw-regular. — */
  --fs-table-head: 0.75rem;  /* 12px — oszlop-fejléc ~ label-01 */
  --fs-table-cell: 0.875rem; /* 14px — cella elsődleges szöveg ~ body-compact-01 */
  --fs-table-meta: 0.75rem;  /* 12px — cella másodlagos / meta szöveg ~ label-01 */

  /* — Eltartások (Carbon spacing) — a hivatalos skála részhalmaza; megfeleltetés:
     sp-1=spacing-02(4) · sp-2=03(8) · sp-3=04(12) · sp-4=05(16) · sp-5=06(24) · sp-6=07(32) · sp-7=09(48).
     A 2px (spacing-01) + 40/64 (spacing-08/10) igény esetén vehető fel — ma semmi nem használja. — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --icon-gap: 6px;               /* ikon↔szöveg térköz gombokban (lazább, mint a korábbi .15rem) */

  /* — Sarok-lekerekítés — Carbon-közeli: a vezérlők/kártyák szögletesek, csak a chip/avatar kerek — */
  --radius-sm: 0;           /* volt 3px — Carbon: éles sarok */
  --radius: 0;              /* volt 6px — gomb, mező, sor */
  --radius-lg: 0;           /* volt 8px — kártya, panel, modal */
  --radius-pill: 999px;     /* chip, tag — marad lekerekített */
  --radius-round: 50%;      /* avatar, pont-jelölő — kör */

  /* — Árnyékok (Carbon-elevation) — */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .15);   /* legördülő menü, dropdown */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .18);   /* popover */
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .2);   /* modal */

  /* — Motion (Carbon duration + productive easing) — 2026-07-05 DS-audit: az ad-hoc transitionök
     helyett EZEKET fogyaszd (pl. `transition: opacity var(--duration-fast-02) var(--easing-standard)`). — */
  --duration-fast-01: 70ms;      /* gomb/toggle mikrointerakció */
  --duration-fast-02: 110ms;     /* fade */
  --duration-moderate-01: 150ms; /* kis kinyílás, rövid mozgás */
  --duration-moderate-02: 240ms; /* kinyílás, toast */
  --duration-slow-01: 400ms;     /* nagy kinyílás, fontos értesítés */
  --duration-slow-02: 700ms;     /* háttér-dimmelés */
  --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);   /* elem végig látható */
  --easing-entrance: cubic-bezier(0, 0, 0.38, 0.9);     /* belépő elem (modal, dropdown) */
  --easing-exit: cubic-bezier(0.2, 0, 1, 0.9);          /* kilépő elem */

  /* — Interakció / állapot — */
  --focus: #E73352;              /* fókuszgyűrű — Carbon: telített márka, 2px-es keret */
  --overlay: rgba(0, 0, 0, .45); /* modal-háttér elsötétítés */
  --hover: #f0f0f0;              /* gomb/ikon hover-háttér */
  --hover-soft: #fafafa;         /* lista-sor hover-háttér */
  --surface-3: #fbfbfb;          /* halvány felület (csempe, klip) */
  --video-bg: #000;              /* valódi fekete — videó/médialejátszó háttér (letterbox) */

  /* — Űrlapmező (Carbon field) — alsó-vonalas mező-stílus — */
  --field-bg: #f4f4f4;           /* Carbon field-01 — a mező háttere */
  --field-border: #8d8d8d;       /* Gray 50 — a mező alsó vonala (fókuszban a márka) */
  --control-h: 40px;             /* egységes gomb/mező-magasság (Carbon „md") */

  /* — Másodlagos akcent — a márkával EGYSÉGESÍTVE, de külön tokenen (a jövőre szétválasztható) — */
  --accent: #E73352;
  --accent-soft: #fde8ec;

  /* — On-brand szöveg — a márka-/színes háttéren olvasható (avatar, badge, elsődleges gomb) — */
  --text-on-brand: #ffffff;

  /* — Toast (értesítő-pirula) — a FORRÁS ezek a tokenek (a Docs `.toast` volt a kiindulási minta, de már EZT fogyasztja). Viselkedés-konvenció: lent KÖZÉPEN, szögletes, ~3s, nincs X-gomb, EGY soros és PONT NÉLKÜL a végén (a hibák a szövegbe fűzve). Minden modul ezt fogyassza; a Scheduler shadcn-toastja a megfelelő Tailwind-osztályokkal (bg-foreground/text-white). — */
  --toast-bg: var(--text);          /* #161616 — Gray100 háttér */
  --toast-fg: #ffffff;              /* fehér szöveg */
  --toast-fs: 0.88rem;              /* ~14px */
  --toast-pad: 0.6rem 1rem;         /* függőleges · vízszintes */
  --toast-radius: var(--radius);    /* 0 — szögletes (Carbon) */
  --toast-duration: 3000ms;         /* auto-eltűnés ennyi után */

  /* — Site-badge (külső márka-azonosítók — a projektválasztó ügyfél-szegmensei: Works / TestBirds) — */
  --site-works-bg: #FCE3E8;
  --site-works-fg: var(--brand);   /* a logó-piros #E73352 — a chip felirata a márkaszín legyen */
  --site-tb-bg: #E4F8F0;
  --site-tb-fg: #183B4F;

  /* — Fájl-típus ikon-színek (Office + média) — a Docs/Records/Notes fájllistái közösen használják — */
  --file-word: #2B579A;
  --file-excel: #217346;
  --file-ppt: #C43E1C;
  --file-pdf: #D13438;
  --file-image: #009d9a;
  --file-video: #8a3ffc;
  --file-archive: #ff832b;
  --file-folder: #FFB900;
  --file-generic: #697077;

  /* — Átmenetek (örökölt rövidítések) — a Carbon motion-tokeneket FOGYASZTJÁK (lásd fent):
     új kódban inkább közvetlenül a --duration-* + --easing-* párost használd. — */
  --transition-fast: var(--duration-fast-02) var(--easing-standard);      /* 110ms — oldalsáv, nav-csukás */
  --transition: var(--duration-moderate-01) var(--easing-standard);       /* 150ms — alap: hover, keret */
  --transition-slow: var(--duration-moderate-02) var(--easing-standard);  /* 240ms — folyamatsáv, hosszabb */

  /* — Rétegzés (z-index) — */
  --z-sticky: 5;
  --z-overlay: 50;
  --z-menu: 1000;

  /* — További tipográfia-lépcsők — */
  --fs-xs: 0.75rem;              /* felirat, meta (12px) */
  --fs-display: 1.75rem;         /* nagy cím (belépő, dashboard) */

  /* — Layout / rács — FLUID (user-döntés 2026-07-05, DS-audit): a tartalom a Carbon 2x grid elve
     szerint a rendelkezésre álló szélességet tölti ki, a plafon a Carbon Max breakpoint (1584px) —
     a korábbi fix 1120px kivezetve. A modul-wrapek block-elemek `max-width: var(--container)`-rel →
     ettől automatikusan fluidok; az oldalmargót a wrap-padding adja (Carbon: 16px, Max-on 24px).
     A TELJES 16-oszlopos Carbon Grid-komponens bevezetése külön, modulonkénti lépés. — */
  --container: 1584px;          /* fluid plafon (Carbon Max breakpoint) — volt: fix 1120px */
  --container-narrow: 880px;    /* keskeny olvasó/űrlap (pl. jegyzet) — szándékosan kötött */
  --container-wide: 1584px;     /* széles, kétoszlopos (pl. videóvágó) = a fluid plafon */
  --grid-min: 280px;            /* kártya-rács oszlop-minimuma (auto-fill, minmax) */
  --grid-gap: 1.5rem;           /* kártya-rács térköze */
  /* Töréspontok — a @media NEM fogad CSS-változót, ezért ezek REFERENCIA (Carbon-skála): 672px (md) · 1056px (lg) · 1312px (xlg) · 1584px (max) */
}

/* — Akadálymentesség: mozgás-érzékeny felhasználók (Carbon motion-szabály) — minden animáció/átmenet
   gyakorlatilag kikapcsol. Az !important indokolt: a11y kill-switch, minden specifikusabb szabályt üt. — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}