/* ============================================================
   ITIskola — Colors & Type (2026-09-30 arculat, D-24)
   Az itiskola.hu oldal palettája: sötétkék alap, lime kiemelés (--brand-code),
   halvány periwinkle másodlagos szín (--brand-ai). A régi változónevek
   (--neon-blue, --neural-purple) kompatibilitás miatt maradnak.
   A régi kurzusai.hu marketingoldalak a befagyasztott colors_and_type.legacy.css-t használják.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------- Brand surfaces (dark stack) ---------- */
  --dark-950: #0b1646;   /* page background (ink) */
  --dark-900: #0d1850;   /* deepest panel */
  --dark-850: #0e1b57;   /* sections */
  --dark-800: #132270;   /* card surface */
  --dark-750: #15247a;   /* card surface (alt) */
  --dark-700: #1a2a84;   /* hover surface */
  --dark-650: #2a3a8c;   /* divider/well */
  --dark-600: #1e2e86;   /* lifted surface */

  /* ---------- Brand accents ---------- */
  --brand-code:      #c9e265;   /* lime — primary: links, CTAs, focus */
  --brand-code-hi:   #dcef8f;   /* hover */
  --brand-ai:        #9aa8ff;   /* periwinkle — secondary accent */
  --brand-ai-hi:     #c3cbff;

  --neon-blue:       var(--brand-code);     /* legacy alias: primary */
  --neon-blue-dim:   var(--brand-code-hi);  /* legacy alias: hover */
  --neon-blue-glow:  rgba(201, 226, 101, 0.16);

  --neural-purple:   var(--brand-ai);       /* legacy alias: secondary */
  --neon-magenta:    var(--brand-ai);
  --neural-purple-glow: rgba(154, 168, 255, 0.18);

  /* ---------- Semantic accents (blog category palette) ---------- */
  --accent-sky:    #63cdff;  /* AI Trendek */
  --accent-teal:   #00c2a8;  /* Tippek */
  --accent-orange: #ffaa4d;  /* Útmutatók */
  --accent-purple: #a882ff;  /* Elemzések */
  --accent-pink:   #ff6b8b;  /* Eszközök */
  --accent-yellow: #ffd64d;  /* Hírek */

  /* ---------- State ---------- */
  --success: #22c55e;
  --warning: #ffaa4d;
  --danger:  #ef4444;
  --info:    var(--neon-blue);
  /* State colours as TEXT on the navy surfaces (AA on every --dark-* step); the base
     colours above stay for backgrounds, dots and borders. */
  --danger-text:  #ff9494;   /* >= 4.76:1 */
  --success-text: #4ade80;   /* >= 5.79:1 */

  /* ---------- Hungarian grade colors (1–5) ---------- */
  --grade-1: #ef4444;  /* Elégtelen */
  --grade-2: #f97316;  /* Elégséges */
  --grade-3: #ffd64d;  /* Közepes */
  --grade-4: #63cdff;  /* Jó */
  --grade-5: #22c55e;  /* Jeles */

  /* ---------- Text hierarchy ---------- */
  --text-primary:   #f2f1ec;
  --text-secondary: #b8beda;   /* 9.4:1 on --dark-950 */
  --text-muted:     #9aa3cf;   /* 7.0:1 on --dark-950, >= 4.98:1 on every surface (AA) */
  --text-disabled:  #5a6499;
  --text-on-accent: #0e1b57;

  /* ---------- Foreground / background convenience ---------- */
  --fg-1: var(--text-primary);
  --fg-2: var(--text-secondary);
  --fg-3: var(--text-muted);
  --bg-1: var(--dark-950);
  --bg-2: var(--dark-850);
  --bg-3: var(--dark-800);

  /* ---------- Borders ---------- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-accent:  var(--neon-blue);

  /* ---------- Glass / overlay ---------- */
  --glass-bg:     rgba(14, 27, 87, 0.6);
  --glass-bg-2:   rgba(21, 36, 122, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur:   16px;

  /* ---------- Shadows / glows ---------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-card:  0 8px 24px rgba(0, 0, 0, 0.45);
  --glow-blue:    0 0 28px rgba(201, 226, 101, 0.32);
  --glow-blue-sm: 0 0 14px rgba(201, 226, 101, 0.22);
  --glow-purple:  0 0 28px rgba(154, 168, 255, 0.35);

  /* ---------- Gradients ---------- */
  --gradient-brand:    linear-gradient(135deg, #c9e265 0%, #9aa8ff 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(201, 226, 101,0.14) 0%, rgba(154, 168, 255,0.16) 100%);
  --gradient-page:     radial-gradient(ellipse at top, #0e1b57 0%, #0b1646 60%);
  --gradient-card:     linear-gradient(180deg, #132270 0%, #0c174c 100%);
  --gradient-text:     linear-gradient(120deg, #c9e265 0%, #dcef8f 35%, #9aa8ff 100%);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* default control */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 16px;    /* glass cards */
  --radius-2xl: 24px;   /* hero panels */
  --radius-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Type families ---------- */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (tracking + leading) ---------- */
  --fs-display:    clamp(48px, 6vw, 80px);
  --fs-h1:         clamp(36px, 4vw, 56px);
  --fs-h2:         clamp(28px, 3vw, 40px);
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-overline:   12px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.03em;
  --tracking-wide:    0.08em;
  --tracking-overline:0.12em;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ============================================================
   Element defaults
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p  { margin: 0; color: var(--fg-2); line-height: var(--lh-normal); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--neon-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--neon-blue-dim); }

:focus-visible { outline: 2px solid var(--brand-code); outline-offset: 3px; border-radius: 4px; }

@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; }
}

/* ============================================================
   Utility classes
   ============================================================ */

.display      { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
.eyebrow      { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--neon-blue); }
.text-grad    { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted        { color: var(--fg-3); }
.dim          { color: var(--fg-2); }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-xl);
}

.card {
  background: var(--gradient-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--neon-blue);
  color: var(--text-on-accent);
  box-shadow: var(--glow-blue-sm);
}
.btn-primary:hover { box-shadow: var(--glow-blue); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-default);
}
.btn-ghost:hover { background: var(--dark-700); border-color: var(--border-strong); }
.btn-neon {
  background: transparent;
  color: var(--neon-blue);
  border-color: var(--neon-blue);
  box-shadow: var(--glow-blue-sm);
}
.btn-neon:hover { background: var(--neon-blue-glow); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: rgba(255,255,255,0.04);
  color: var(--fg-2);
  border: 1px solid var(--border-default);
}