/* ==========================================================================
   03-tokens-brand.css — ICF 2026 brand tokenek

   Forrás: Figma "Arculati tábla" (ICF WEBSITE REDESIGN)
   https://www.figma.com/design/Au0OYH5a1FigJsfIeZ91LO/?node-id=1-5885

   ────────────────────────────────────────────────────────────────────────
   FELÉPÍTÉS — két réteg:

   1. NYERS PALETTA (--icf-*)
      A hat arculati szín. Ezt és CSAK ezt írja felül a Customizer
      (Megjelenés → Testreszabás → ICF — Arculati színek).

   2. SZEMANTIKUS TOKENEK (--color-*)
      A nyers palettából származnak color-mix()-szel. Ezeket használja a
      téma többi CSS-e. Mivel számítottak, a Customizerben cserélt szín
      MINDEN származtatott értéket (tint, alpha, border, shadow) magával visz.

   ⚠️ A --icf-* alapértékeknek EGYEZNIÜK KELL az inc/customizer.php-ben
      lévő icf_brand_palette() defaultjaival. Ha itt módosítasz, ott is.
   ========================================================================== */

:root {

  /* ========================================================================
     1. NYERS ARCULATI PALETTA
     ======================================================================== */

  --icf-deep-blue: #212251;   /* Deep Blue — fő szöveg, sötét szekciók */
  --icf-blue:      #2b379b;   /* Blue      — link, kiemelés, aláhúzás */
  --icf-light-blue:#5778fa;   /* Light Blue— accent, eyebrow, ecsetvonás */
  --icf-yellow:    #efcb30;   /* Yellow    — elsődleges CTA */
  --icf-bone:      #f8f0e4;   /* Bone      — oldal háttér */
  --icf-bone-dark: #e8dfcf;   /* Bone dark — kártya háttér, finom border */
  --icf-white:     #ffffff;

  /* ========================================================================
     2. SZEMANTIKUS SZÍNEK — a palettából számítva

     A color-mix() miatt elég a nyers palettát cserélni, minden árnyalat
     automatikusan követi.
     ======================================================================== */

  /* Primary — link, interaktív elem */
  --color-primary:       var(--icf-blue);
  --color-primary-hover: var(--icf-deep-blue);
  --color-primary-soft:  color-mix(in srgb, var(--icf-blue) 10%, var(--icf-white));

  /* Secondary — accent, eyebrow, dekoráció */
  --color-secondary:       var(--icf-light-blue);
  --color-secondary-hover: color-mix(in srgb, var(--icf-light-blue) 82%, #000);
  --color-secondary-soft:  color-mix(in srgb, var(--icf-light-blue) 10%, var(--icf-white));

  /* Accent — elsődleges CTA (sárga pill gomb) */
  --color-accent:       var(--icf-yellow);
  --color-accent-hover: color-mix(in srgb, var(--icf-yellow) 86%, #000);
  --color-accent-soft:  color-mix(in srgb, var(--icf-yellow) 18%, var(--icf-white));

  /* ========================================================================
     SZÖVEG SZÍNEK
     ======================================================================== */

  --color-text:        var(--icf-deep-blue);
  --color-text-muted:  color-mix(in srgb, var(--icf-deep-blue) 65%, transparent);
  --color-text-subtle: color-mix(in srgb, var(--icf-deep-blue) 45%, transparent);
  --color-text-invert: var(--icf-white);

  /* ========================================================================
     HÁTTÉR SZÍNEK

     Az ICF design alap háttere a csontszín (Bone), NEM a fehér.
     ======================================================================== */

  --color-bg:        var(--icf-bone);
  --color-bg-alt:    var(--icf-white);
  --color-bg-muted:  var(--icf-bone-dark);
  --color-bg-invert: var(--icf-deep-blue);

  /* ========================================================================
     BORDER SZÍNEK
     ======================================================================== */

  --color-border:        color-mix(in srgb, var(--icf-deep-blue) 15%, transparent);
  --color-border-strong: color-mix(in srgb, var(--icf-deep-blue) 25%, transparent);
  --color-border-focus:  var(--icf-light-blue);

  /* ========================================================================
     STATUS SZÍNEK — visszajelzéshez (nem arculati, semleges)
     ======================================================================== */

  --color-success:      #10b981;
  --color-success-soft: #d1fae5;

  --color-warning:      #d98a00;
  --color-warning-soft: #fdf0d5;

  --color-error:        #dc2626;
  --color-error-soft:   #fee2e2;

  --color-info:         var(--icf-light-blue);
  --color-info-soft:    var(--color-secondary-soft);

  /* ========================================================================
     FONT FAMILY

     Display (címsor, gomb) : Nunito SemiBold
     Folyószöveg, UI        : Plus Jakarta Sans
     Self-hosted — lásd 04-fonts.css
     ======================================================================== */

  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Nunito', var(--font-sans);
  --font-serif:   Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* ========================================================================
     TIPOGRÁFIA — ICF skála

     A Figma design pixelértékei normalizálva (a design 43.1px / 16.7px
     jellegű törtértékei a böngésző-import artefaktumai).
     ======================================================================== */

  --text-h1:      2.75rem;    /* 44px — hero címsor */
  --text-h2:      2.5rem;     /* 40px */
  --text-h3:      1.75rem;    /* 28px */
  --text-h4:      1.375rem;   /* 22px */
  --text-h5:      1.125rem;   /* 18px */
  --text-h6:      1rem;       /* 16px */

  --text-lead:    1.0625rem;  /* 17px — folyószöveg a designban */
  --text-eyebrow: 0.8125rem;  /* 13px — szekció fölötti kiskapitális */
  --text-nav:     0.9375rem;  /* 15px — menü */

  /* Szekció címsor — a designban NAGYOBB mint a hero h1 (54 vs 44 px).
     Szándékos: a hero címsora keskeny hasábban fut, a szekciócímek
     teljes szélességben. A .section-head__title komponens használja,
     így a h1–h6 alapskála semleges marad más oldalakon. */
  --text-section-title: 3.375rem;   /* 54px */

  /* Belső oldal címe — a page-hero középre zárt, teljes szélességű címsora.
     A designban ez a legnagyobb szöveg az oldalon (72px), a szekciócímek
     fölött egy lépcsővel. Csak a .page-hero__title használja, hogy a
     h1 alapskála (44px) a folyószövegben semleges maradjon.
     Figma: 1920w light, node 1:3678 (Magyar tagság) */
  --text-page-title: 4.5rem;        /* 72px */

  --lh-display:   1.15;       /* Címsorok */
  --lh-body:      1.6;        /* 27.2 / 17 */

  --tracking-display: -0.02em;   /* -0.88px @ 44px */
  --tracking-eyebrow: 0.14em;    /*  1.82px @ 13px */

  /* ========================================================================
     ICF FORMANYELV — radius, árnyék

     A design két radiust használ: nagy lekerekítésű kártya (32px) és
     teljesen pill gomb/badge.
     ======================================================================== */

  --radius-card: 2rem;              /* 32px — kép- és tartalomkártya */
  --radius-pill: var(--radius-full);

  --shadow-card:  0 30px 60px -20px color-mix(in srgb, var(--icf-deep-blue) 25%, transparent);
  --shadow-badge: 0 12px 16px -4px  color-mix(in srgb, var(--icf-deep-blue) 25%, transparent);
  --shadow-nav:   0 8px 24px -12px  color-mix(in srgb, var(--icf-deep-blue) 30%, transparent);

  /* ========================================================================
     LAYOUT

     A design 1280px-es tartalom-konténerrel dolgozik, 32px gutterrel.
     ======================================================================== */

  --container-default: 1366px;
  --section-padding-block: var(--space-24);   /* 96px */

  /* A core skálából hiányzó köztes lépcső — a kártya padding és a
     kártyarács gutter a designban 28px. */
  --space-7: 1.75rem;   /* 28px */

  /* Sticky header magassága — anchor scroll offsethez (05-base.css) */
  --scroll-offset: var(--space-24);

}