/* =========================================================
   Loop Magazin — Design System
   Repositioned: VOGUE-class editorial — Didone display +
   tiszta fehér/fekete monochrome, 1 finom accent.
   ========================================================= */

/* ---- Web fonts ----
   Display:  "Playfair Display"  ← high-contrast Didone (Vogue logo class)
   Body:     "Inter Tight"        ← modern sans, web-friendly
   UI sans:  "Inter Tight"        ← labels, meta, navigation
   Mono:     "JetBrains Mono"     ← timestamps, codes
   ---------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============== PAPER / NEUTRAL CORE — pure white Vogue stage ============== */
  --paper:        #ffffff;   /* primary background — pure white */
  --paper-soft:   #fafafa;   /* secondary surface */
  --paper-deep:   #f0f0f0;   /* dividers, soft fills */
  --ink:          #000000;   /* primary text — pure black */
  --ink-soft:     #1a1a1a;   /* secondary text */
  --ink-muted:    #6e6e6e;   /* meta, captions, eyebrow */
  --ink-quiet:    #a8a8a8;   /* timestamps, supporting */

  /* ============== ACCENT — Summer issue palette ============== */
  --signal:       #15506b;   /* deep petrol — editorial accent on white */
  --signal-soft:  #f5c518;   /* warm summer yellow — labels on dark, hover punch */
  --signal-deep:  #00435f;   /* darker petrol — newsletter base, button-deep */
  --signal-sky:   #a6c8da;   /* sky blue — soft tertiary, dividers on dark */
  --accent-red:   #c8102e;   /* rare editorial red — covers, sale, alerts only */
  --summer-yellow: #f5c518;  /* alias for explicit summer-yellow callouts */
  --summer-petrol: #15506b;  /* alias for explicit petrol callouts */
  --kave-paper:    #faf6ed;  /* Kávé mellé formátum — meleg krém */
  --kave-accent:   #f5c518;  /* alias → summer-yellow */

  /* Kávé mellé hero — rovat (témakategória) színkódok */
  --cat-compliance-accent: #15506b;
  --cat-compliance-paper:  #f2f7f9;
  --cat-ai-accent:         #0e6382;
  --cat-ai-paper:          #f0f8fb;
  --cat-kiber-accent:      #3d4a5c;
  --cat-kiber-paper:       #f4f5f7;
  --cat-esg-accent:        #3d6b4f;
  --cat-esg-paper:         #f3f7f4;
  --cat-spektrum-accent:   #9b3040;
  --cat-spektrum-paper:    #faf4f5;
  --cat-radar-accent:      #a66f18;
  --cat-radar-paper:       #faf6ef;
  --cat-egyeb-accent:      #6e6e6e;
  --cat-egyeb-paper:       #faf6ed;

  /* ============== SEMANTIC FILLS ============== */
  --bg:           var(--paper);
  --bg-elevated: #ffffff;     /* cards, modals */
  --bg-deep:     #000000;     /* inverted blocks (newsletter, quotes) */
  --on-deep:     #ffffff;     /* text on dark blocks */

  --border:      #000000;     /* hairline rules — pure black */
  --border-soft: #d4d4d4;     /* secondary dividers */
  --border-mute: #ebebeb;     /* tertiary, table rows */

  /* ============== STATUS (rare; muted to fit editorial) ============== */
  --ok:    #4a6741;
  --warn:  #b07d2c;
  --err:   #b03a2e;

  /* ============== RADII (tight, document-like) ============== */
  --r-0: 0px;     /* default — editorial uses sharp corners */
  --r-1: 2px;     /* inputs, tags */
  --r-2: 4px;     /* buttons */
  --r-3: 8px;     /* rare, larger surfaces only */

  /* ============== SPACING (4px base) ============== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ============== ELEVATION (used sparingly) ============== */
  --shadow-1: 0 1px 0 rgba(26,26,26,0.06);
  --shadow-2: 0 1px 2px rgba(26,26,26,0.08), 0 0 0 1px rgba(26,26,26,0.04);
  --shadow-3: 0 8px 24px rgba(26,26,26,0.10);

  /* ============== TYPE FAMILIES — Vogue-class Didone display + sans body ============== */
  --font-display: "Playfair Display", "Bodoni 72", "Didot", "Times New Roman", serif;
  --font-serif:   "Playfair Display", "Bodoni 72", "Didot", "Times New Roman", serif;
  --font-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============== TYPE SCALE — magazine-cover scale ============== */
  --t-display:    clamp(64px, 9vw, 140px);   /* cover-size Didone */
  --t-h0:         clamp(48px, 6.5vw, 88px);
  --t-h1:         clamp(36px, 4.5vw, 60px);
  --t-h2:         clamp(28px, 3vw, 42px);
  --t-h3:         22px;
  --t-h4:         18px;

  /* Body */
  --t-lead:       21px;
  --t-body:       18px;
  --t-body-sm:    16px;
  --t-meta:       13px;
  --t-eyebrow:    11px;
  --t-mono:       13px;

  /* ============== LINE-HEIGHTS ============== */
  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-display:  1.02;
  --lh-body:     1.55;
  --lh-meta:     1.35;

  /* ============== TRACKING — Didone needs LESS negative tracking ============== */
  --tr-tight:    -0.01em;
  --tr-display:  -0.005em;   /* Didone: almost neutral; high-contrast strokes need air */
  --tr-eyebrow:  0.22em;     /* Vogue-style very wide eyebrow tracking */
  --tr-meta:     0.08em;

  /* ============== MOTION ============== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ============== LAYOUT ============== */
  --max-readable: 64ch;
  --max-content:  1280px;
  --max-wide:     1440px;
  --rule:         1px solid var(--border);
  --rule-soft:    1px solid var(--border-soft);
}

/* =========================================================
   BASE
   ========================================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   ========================================================= */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  color: var(--ink-muted);
  font-weight: 500;
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--signal); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-8) 0;
}

blockquote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--s-8) var(--s-5);
  margin: var(--s-10) 0;
  text-wrap: balance;
}

::selection { background: var(--ink); color: var(--paper); }

/* =========================================================
   UTILITY: drop cap (editorial signature)
   ========================================================= */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.2em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.08em -0.1em 0;
  color: var(--ink);
}

/* =========================================================
   UTILITY: numbered section marker (editorial signature)
   ========================================================= */
.section-no {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}