/* ==========================================================================
   POLIGON KFT. — DESIGN TOKENS
   v1.0
   Egyetlen forrás az arculati változóknak. Nyomdai anyag és weboldal
   egyaránt ezt használja. A színek a meglévő logóból származnak
   (navy #1D3772, arany #F1BC38) — a skálák ezekből lettek levezetve.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. SZÍN — MÁRKA
     --------------------------------------------------------------------- */
  --pg-navy-950: #080f22;
  --pg-navy-900: #0c1732;
  --pg-navy-800: #132349;
  --pg-navy-700: #1d3772; /* ◆ MÁRKA ALAPSZÍN — a logó kékje */
  --pg-navy-600: #2a4b93;
  --pg-navy-500: #3a62b4;
  --pg-navy-400: #6e8ccb;
  --pg-navy-300: #9db2dd;
  --pg-navy-200: #c7d3ee;
  --pg-navy-100: #e2e9f7;
  --pg-navy-50:  #f3f6fc;

  --pg-gold-900: #4a3708;
  --pg-gold-800: #6e520c;
  --pg-gold-700: #8f6b0e; /* szövegbiztos arany világos háttéren (AA) */
  --pg-gold-600: #bf9014;
  --pg-gold-500: #f1bc38; /* ◆ MÁRKA KIEMELŐSZÍN — a logó aranya */
  --pg-gold-400: #f6cd68;
  --pg-gold-300: #fade9a;
  --pg-gold-200: #fcebc2;
  --pg-gold-100: #fef5e1;
  --pg-gold-50:  #fffbf0;

  /* ---------------------------------------------------------------------
     2. SZÍN — SEMLEGES
     --------------------------------------------------------------------- */
  --pg-ink:      #101319;
  --pg-graphite: #3b404b;
  --pg-slate:    #6b7280;
  --pg-mist:     #a8adb8;
  --pg-line:     #e3e6ec;
  --pg-paper:    #f7f8fa;
  --pg-white:    #ffffff;

  /* ---------------------------------------------------------------------
     3. SZÍN — SZEMANTIKUS (ezeket használd a komponensekben)
     --------------------------------------------------------------------- */
  --pg-brand:            var(--pg-navy-700);
  --pg-brand-deep:       var(--pg-navy-900);
  --pg-accent:           var(--pg-gold-500);
  --pg-accent-ink:       var(--pg-gold-700); /* arany szöveghez világos háttéren */

  --pg-surface:          var(--pg-white);
  --pg-surface-alt:      var(--pg-paper);
  --pg-surface-tint:     var(--pg-navy-50);
  --pg-surface-warm:     var(--pg-gold-50);
  --pg-surface-invert:   var(--pg-navy-700);
  --pg-surface-invert-2: var(--pg-navy-900);

  --pg-text:             var(--pg-ink);
  --pg-text-secondary:   var(--pg-graphite);
  --pg-text-muted:       var(--pg-slate);
  --pg-text-on-dark:     var(--pg-white);
  --pg-text-on-dark-2:   var(--pg-navy-200);
  --pg-text-on-accent:   var(--pg-navy-900);

  --pg-border:           var(--pg-line);
  --pg-border-strong:    #c9ced8;
  --pg-border-on-dark:   rgba(255, 255, 255, 0.18);
  --pg-focus:            var(--pg-gold-500);

  /* ---------------------------------------------------------------------
     4. TIPOGRÁFIA
     Display: Archivo (grotesque, mérnöki karakter, nagy súlyokon feszes)
     Szöveg:  Inter (semleges, kiváló olvashatóság kis méretben is)
     Mindkettő Google Fonts, latin + latin-ext (magyar ő/ű támogatás).
     --------------------------------------------------------------------- */
  --pg-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --pg-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --pg-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --pg-w-regular: 400;
  --pg-w-medium:  500;
  --pg-w-semi:    600;
  --pg-w-bold:    700;
  --pg-w-black:   800;

  /* Méretskála — rem alapú, hogy nyomdában (root = 10pt) és weben
     (root = 16px) ugyanaz a rendszer működjön. */
  --pg-size-display-xl: 6.0rem;
  --pg-size-display-l:  3.8rem;
  --pg-size-h1:         2.8rem;
  --pg-size-h2:         2.0rem;
  --pg-size-h3:         1.35rem;
  --pg-size-h4:         1.1rem;
  --pg-size-stat:       3.2rem;
  --pg-size-lead:       1.15rem;
  --pg-size-body:       0.95rem;
  --pg-size-body-s:     0.85rem;
  --pg-size-caption:    0.75rem;
  --pg-size-eyebrow:    0.72rem;

  --pg-lh-tight:  0.94;
  --pg-lh-snug:   1.08;
  --pg-lh-normal: 1.35;
  --pg-lh-relax:  1.6;

  --pg-tr-display: -0.03em;
  --pg-tr-head:    -0.02em;
  --pg-tr-body:    0;
  --pg-tr-eyebrow: 0.18em;

  /* ---------------------------------------------------------------------
     5. TÉR — 4-es alapú skála
     --------------------------------------------------------------------- */
  --pg-space-1:  0.25rem;
  --pg-space-2:  0.5rem;
  --pg-space-3:  0.75rem;
  --pg-space-4:  1rem;
  --pg-space-5:  1.5rem;
  --pg-space-6:  2rem;
  --pg-space-7:  2.5rem;
  --pg-space-8:  3rem;
  --pg-space-9:  4rem;
  --pg-space-10: 6rem;

  /* ---------------------------------------------------------------------
     6. FORMA
     --------------------------------------------------------------------- */
  --pg-radius-none: 0;
  --pg-radius-sm:   2px;
  --pg-radius-md:   4px;
  --pg-radius-lg:   8px;
  --pg-radius-xl:   14px;
  --pg-radius-pill: 999px;

  --pg-rule:        1px;
  --pg-rule-strong: 2px;
  --pg-rule-accent: 3px;

  /* A logó dőlésszögéből mért geometria (mért érték ≈ 9–12°).
     Minden ferde elem — akcentuscsík, chip, képvágás — ezt használja. */
  --pg-slant: 12deg;

  /* ---------------------------------------------------------------------
     7. ÁRNYÉK (csak képernyőn — nyomdában nem használjuk)
     --------------------------------------------------------------------- */
  --pg-shadow-sm: 0 1px 2px rgba(12, 23, 50, 0.06), 0 1px 1px rgba(12, 23, 50, 0.04);
  --pg-shadow-md: 0 4px 12px rgba(12, 23, 50, 0.08), 0 1px 3px rgba(12, 23, 50, 0.05);
  --pg-shadow-lg: 0 18px 40px rgba(12, 23, 50, 0.12), 0 4px 10px rgba(12, 23, 50, 0.06);

  /* ---------------------------------------------------------------------
     8. MOZGÁS (weboldalhoz)
     --------------------------------------------------------------------- */
  --pg-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --pg-dur-fast:  140ms;
  --pg-dur-base:  240ms;
  --pg-dur-slow:  460ms;

  /* ---------------------------------------------------------------------
     9. RÁCS
     --------------------------------------------------------------------- */
  --pg-grid-cols:    12;
  --pg-grid-gutter:  1.5rem;
  --pg-page-margin:  15mm;   /* A4 fekvő nyomdai margó */
  --pg-container:    1240px; /* weboldal max szélesség */
}

/* Képernyős alapérték. Nyomdai lapoknál a dokumentum 10pt-re állítja. */
html { font-size: 16px; }