/*
 * tokens.css — design tokenek (v3 — editorial irány)
 *
 * Irány: nagy tipográfia, meleg törtfehér papír, majdnem fekete tinta,
 * sík felületek. Nincs árnyék, nincs sarokkerekítés, nincs kártyaháttér.
 * A hangsúlyt a méretkontraszt és az üres hely adja, nem a szín.
 *
 * MINDEN érték innen jön — sablonba vagy komponens-CSS-be értéket égetni tilos.
 */

:root {
    /* ---------------------------------------------------------------
       Színek — szándékosan monokróm. Akcentusszín NINCS: a kiemelést
       a méret, a verzál és az aláhúzás adja (mint a mintában).
       --------------------------------------------------------------- */
    --paper: #EAE4DE;        /* oldal háttere — meleg törtfehér */
    --paper-deep: #E1D9D1;   /* váltakozó sáv, alig érzékelhető elválás */
    --ink: #14100E;          /* címsor és törzsszöveg — 15.0:1 a papíron */
    --ink-muted: #5A524C;    /* másodlagos szöveg — 6.06:1 a papíron */
    --rule: #C9BFB6;         /* dekoratív hajszálvonal */
    --rule-ink: #14100E;     /* hangsúlyos vonal, aláhúzás, fókuszgyűrű */

    /* Sötét megfordítás — a záró CTA sávhoz (a mintában is van sötét blokk).
       Meleg, sötét espresso-barna a semleges fekete helyett — a papír és a
       hajszálvonalak melegével harmonizál, nem tör ki a monokróm palettából. */
    --ink-surface: #2B2117;
    --ink-surface-text: #EAE4DE;

    /* ---------------------------------------------------------------
       Tipográfia — egyetlen variable család (Archivo), két tengellyel:
       wght 100..900 és wdth 62%..125%. A display-hatást a nagy méret +
       szűk szélesség (font-stretch) + tömör sortáv adja.
       --------------------------------------------------------------- */
    --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: Consolas, Monaco, 'Courier New', monospace;

    /*
     * Típusskála. A hero kikerült az oldalról, ezért a legnagyobb fokozat a
     * `h1` — az oldal nyitó szekciójának címe („Bemutatkozás").
     */
    --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
    --fs-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    --fs-tile: clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
    /*
     * Keskenyebb csempeoszlopokhoz (`.tile-grid--wide`): a hosszú magyar
     * összetett szavakat („Változásmenedzsment") nem törjük el, inkább
     * kisebb betűvel szedjük — így egy szó egy sorba fér.
     */
    --fs-tile-sm: clamp(1.0625rem, 0.95rem + 0.55vw, 1.35rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.8125rem;

    --lh-heading: 1.08;
    --lh-body: 1.65;

    --tracking-display: -0.025em;
    --tracking-label: 0.14em;   /* a verzál mikro-feliratokhoz (nav, badge) */

    --wght-display: 700;

    /* ---------------------------------------------------------------
       Térköz és rács
       --------------------------------------------------------------- */
    --container: 84rem;
    --container-narrow: 44rem;

    /*
     * Köztes sáv. Ott kell, ahol egy oldalon SZÖVEG és KÉP váltakozik (pl. az
     * alkalmazás-aloldalak): a keskeny sáv a képernyőképeket összenyomná, a
     * teljes szélesség a szöveget nyújtaná el. A bekezdés sorhosszát ilyenkor
     * nem a sáv, hanem a `ch` alapú max-width fogja meg.
     */
    --container-mid: 52rem;
    --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
    --space-section: clamp(3.5rem, 2rem + 5.5vw, 8rem);
    --space-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);

    --nav-height: 4.5rem;
    --hairline: 1px;

    /* ---------------------------------------------------------------
       Mozgás és fókusz
       --------------------------------------------------------------- */
    --transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
    --focus-ring: 2px solid var(--rule-ink);
    --focus-offset: 3px;
}