/* ==========================================================================
   G-LOG · Design tokens · v1.0 (2026-09)
   Forrás: G-LOG brand PDF (paletta, tipográfia, komponensek, 20px szabály)
   Minden komponens csak ezekből a tokenekből építkezik.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 1. Nyers paletta -------------------------------------------------- */
  /* Korall (akció, kiemelés) */
  --gl-coral-600: #C9392E;   /* hibaüzenet világos háttéren (kontraszt) */
  --gl-coral-500: #EF4B3E;   /* primer akcentus */
  --gl-coral-400: #F27266;   /* kiemelt szöveg */
  --gl-coral-300: #F5958D;
  --gl-coral-200: #F8B8B3;
  --gl-coral-100: #FBDBD8;

  /* Navy / tinta (sötét alapok) */
  --gl-navy-900:  #000B2B;   /* primer sötét */
  --gl-navy-800:  #0D1323;
  --gl-ink-900:   #1A1A1A;

  /* Acél (szöveg, vonalak, üveg) */
  --gl-slate-700: #313D55;
  --gl-slate-500: #646E80;
  --gl-slate-300: #989DA9;
  --gl-slate-200: #CCCDD4;

  /* Köd (világos alapok) */
  --gl-fog-300:   #E9EDEE;   /* primer világos */
  --gl-fog-200:   #EEF2F4;
  --gl-fog-150:   #F2F6F6;
  --gl-fog-100:   #F6F9FA;
  --gl-fog-50:    #FAFDFF;
  --gl-white:     #FFFFFF;

  /* ---- 2. Szemantikus színek (világos mód) ------------------------------- */
  --gl-bg:          var(--gl-fog-300);
  --gl-bg-alt:      var(--gl-fog-50);
  --gl-bg-elevated: var(--gl-white);

  --gl-heading:     var(--gl-slate-700);
  --gl-text:        var(--gl-slate-700);
  --gl-text-2:      var(--gl-slate-500);
  --gl-text-3:      var(--gl-slate-300);

  --gl-accent:      var(--gl-coral-500);
  --gl-accent-text: var(--gl-coral-400);

  --gl-line:        rgba(49, 61, 85, .12);
  --gl-line-strong: rgba(49, 61, 85, .28);

  /* Fotón / sötét médián ülő szöveg (témától független) */
  --gl-on-media:    var(--gl-fog-50);
  --gl-on-media-2:  var(--gl-fog-300);

  /* ---- 3. Komponens-színek (a PDF szerint témától függetlenek) ----------- */
  --gl-btn-bg:             var(--gl-fog-100);
  --gl-btn-text:           var(--gl-slate-700);
  --gl-btn-hover-bg:       var(--gl-coral-500);
  --gl-btn-hover-text:     var(--gl-fog-50);
  --gl-btn-pressed-bg:     var(--gl-navy-900);
  --gl-btn-pressed-text:   var(--gl-fog-50);
  --gl-btn-disabled-bg:    var(--gl-fog-200);
  --gl-btn-disabled-text:  var(--gl-slate-300);
  --gl-btn-outline:        rgba(239, 75, 62, .5);
  --gl-btn-outline-text:   var(--gl-coral-400);

  --gl-tag-bg:    var(--gl-fog-200);
  --gl-tag-text:  var(--gl-coral-400);

  --gl-textlink:          var(--gl-slate-500);
  --gl-textlink-hover:    var(--gl-slate-700);
  --gl-textlink-pressed:  var(--gl-navy-900);
  --gl-textlink-disabled: var(--gl-slate-300);

  /* Üveg (blur) felületek */
  --gl-glass-10:  rgba(250, 253, 255, .10);   /* kártya, fotón */
  --gl-glass-30:  rgba(250, 253, 255, .30);   /* kártya, erősebb */
  --gl-menu-50:   rgba(100, 110, 128, .50);   /* header / menü ikon default */
  --gl-menu-80:   rgba(100, 110, 128, .80);   /* hover */
  --gl-menu-100:  #646E80;                    /* nyitott állapot */
  --gl-blur:      24px;

  --gl-navlink:            var(--gl-fog-100);
  --gl-navlink-line:       var(--gl-slate-200);
  --gl-navlink-hover:      var(--gl-fog-50);
  --gl-navlink-hover-line: var(--gl-fog-50);

  /* ---- 4. Tipográfia ----------------------------------------------------- */
  --gl-font-display: "Switzer", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gl-font-body:    "Switzer", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gl-font-ui:      "Google Sans Flex", "Google Sans", "Product Sans", "DM Sans", system-ui, sans-serif;
  --gl-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Skála – mobil: alap 16px, arány 1.125 (PDF) */
  --gl-fs-display: 2rem;      /* 32 */
  --gl-fs-h1:      1.813rem;  /* 29 */
  --gl-fs-h2:      1.625rem;  /* 26 */
  --gl-fs-h3:      1.438rem;  /* 23 */
  --gl-fs-h4:      1.25rem;   /* 20 */
  --gl-fs-h5:      1.125rem;  /* 18 */
  --gl-fs-body:    1rem;      /* 16 */
  --gl-fs-small:   .875rem;   /* 14 */
  --gl-fs-caption: .813rem;   /* 13 */
  --gl-fs-micro:   .688rem;   /* 11 */

  --gl-lh-tight:   1.05;
  --gl-lh-snug:    1.15;
  --gl-lh-heading: 1.25;
  --gl-lh-body:    1.5;
  --gl-lh-small:   1.45;

  --gl-ls-display: -.02em;
  --gl-ls-heading: -.01em;
  --gl-ls-ui:      .04em;   /* gomb, menü */
  --gl-ls-label:   .08em;   /* szekció címke */

  --gl-fw-regular: 400;
  --gl-fw-medium:  500;
  --gl-fw-semibold:600;
  --gl-fw-bold:    700;

  /* ---- 5. Forma és tér --------------------------------------------------- */
  --gl-radius:       20px;   /* mindenhol */
  --gl-radius-outer: 40px;   /* egymásba ágyazott kerekítés: belső + 20 */
  --gl-inset:        20px;   /* belső elem távolsága a széltől */

  --gl-space-1:  4px;
  --gl-space-2:  8px;
  --gl-space-3:  12px;
  --gl-space-4:  16px;
  --gl-space-5:  20px;
  --gl-space-6:  24px;
  --gl-space-7:  32px;
  --gl-space-8:  40px;
  --gl-space-9:  48px;
  --gl-space-10: 64px;
  --gl-space-11: 80px;
  --gl-space-12: 120px;

  --gl-container: 1200px;
  --gl-gutter:    20px;
  --gl-section-y: 64px;

  --gl-btn-h:      40px;   /* 40px magasság + 20px sugár = pontos pill */
  --gl-btn-h-lg:   56px;
  --gl-control-h:  48px;   /* header, menü ikon */

  /* ---- 6. Mozgás --------------------------------------------------------- */
  --gl-ease:        cubic-bezier(.2, .8, .2, 1);
  --gl-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --gl-dur-fast: 160ms;
  --gl-dur:      240ms;
  --gl-dur-slow: 480ms;

  /* ---- 7. Effektek ------------------------------------------------------- */
  --gl-shadow-card: 0 24px 48px -24px rgba(0, 11, 43, .45);
  --gl-focus:       0 0 0 3px rgba(239, 75, 62, .45);
}

/* Desktop skála: alap 16px, arány 1.25 (PDF) */
@media (min-width: 960px) {
  :root {
    --gl-fs-display: 3.813rem;  /* 61 */
    --gl-fs-h1:      3.063rem;  /* 49 */
    --gl-fs-h2:      2.438rem;  /* 39 */
    --gl-fs-h3:      1.938rem;  /* 31 */
    --gl-fs-h4:      1.563rem;  /* 25 */
    --gl-fs-h5:      1.25rem;   /* 20 */
    --gl-fs-body:    1rem;      /* 16 */
    --gl-fs-small:   .813rem;   /* 13 */
    --gl-fs-caption: .625rem;   /* 10 */
    --gl-fs-micro:   .5rem;     /* 8 */
    --gl-section-y:  120px;
  }
}

/* ---- Sötét mód: rendszerbeállítás (ha nincs kifejezett választás) -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gl-bg:          var(--gl-navy-900);
    --gl-bg-alt:      var(--gl-navy-800);
    --gl-bg-elevated: var(--gl-ink-900);
    --gl-heading:     var(--gl-fog-50);
    --gl-text:        var(--gl-fog-100);
    --gl-text-2:      var(--gl-fog-150);
    --gl-text-3:      var(--gl-fog-200);
    --gl-line:        rgba(250, 253, 255, .12);
    --gl-line-strong: rgba(250, 253, 255, .28);
    --gl-shadow-card: 0 24px 48px -24px rgba(0, 0, 0, .7);
  }
}

/* ---- Sötét mód: kifejezett választás ------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --gl-bg:          var(--gl-navy-900);
  --gl-bg-alt:      var(--gl-navy-800);
  --gl-bg-elevated: var(--gl-ink-900);
  --gl-heading:     var(--gl-fog-50);
  --gl-text:        var(--gl-fog-100);
  --gl-text-2:      var(--gl-fog-150);
  --gl-text-3:      var(--gl-fog-200);
  --gl-line:        rgba(250, 253, 255, .12);
  --gl-line-strong: rgba(250, 253, 255, .28);
  --gl-shadow-card: 0 24px 48px -24px rgba(0, 0, 0, .7);
}

/* ---- Lokális sémák: egy világos oldalon belül is lehet sötét szekció ----- */
.gl-scheme-light {
  color-scheme: light;
  --gl-bg:          var(--gl-fog-300);
  --gl-bg-alt:      var(--gl-fog-50);
  --gl-bg-elevated: var(--gl-white);
  --gl-heading:     var(--gl-slate-700);
  --gl-text:        var(--gl-slate-700);
  --gl-text-2:      var(--gl-slate-500);
  --gl-text-3:      var(--gl-slate-300);
  --gl-line:        rgba(49, 61, 85, .12);
  --gl-line-strong: rgba(49, 61, 85, .28);
}
.gl-scheme-dark {
  color-scheme: dark;
  --gl-bg:          var(--gl-navy-900);
  --gl-bg-alt:      var(--gl-navy-800);
  --gl-bg-elevated: var(--gl-ink-900);
  --gl-heading:     var(--gl-fog-50);
  --gl-text:        var(--gl-fog-100);
  --gl-text-2:      var(--gl-fog-150);
  --gl-text-3:      var(--gl-fog-200);
  --gl-line:        rgba(250, 253, 255, .12);
  --gl-line-strong: rgba(250, 253, 255, .28);
}