/* ============================================================
   Megapark — токени та шрифти.
   Джерело: Megapark Design System (tokens/colors, typography,
   spacing, effects). Файли злиті в один, щоб не платити за
   чотири зайві запити.

   ⚠️ Шрифти поки що .ttf. Перед запуском — субсет кирилиці
   у woff2 (TASKS T-51): це знімає ~70% ваги шрифтів.
   ============================================================ */

/* ---------- Benzin — дисплейний ---------- */
@font-face {
  font-family: "Benzin";
  src: url("../fonts/Benzin-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Benzin";
  src: url("../fonts/Benzin-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Benzin";
  src: url("../fonts/Benzin-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Benzin";
  src: url("../fonts/Benzin-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- RockStar — текстовий ---------- */
@font-face {
  font-family: "RockStar";
  src: url("../fonts/RockStar-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RockStar";
  src: url("../fonts/RockStar-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "RockStar";
  src: url("../fonts/RockStar-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Бренд: електричний жовтий ---------- */
  --mp-yellow: #F8EA33;
  --mp-yellow-bright: #FFF34D;
  --mp-yellow-deep: #E4D200;
  --mp-yellow-dim: #B7A800;

  /* ---------- Бренд: чорнило та вугілля ---------- */
  --mp-black: #0E0F11;
  --mp-ink: #17181A;
  --mp-charcoal: #24262A;
  --mp-slate: #34373D;
  --mp-graphite: #4A4E56;

  /* ---------- Бренд: лісова зелень ---------- */
  --mp-green: #2E5E3B;
  --mp-green-bright: #3C7D4E;
  --mp-green-deep: #1F4429;

  /* ---------- Теплі нейтралі ---------- */
  --mp-wood: #C79A5B;
  --mp-sand: #E7DCC4;
  --mp-cream: #F5F1E8;

  /* ---------- Холодні нейтралі ---------- */
  --mp-white: #FFFFFF;
  --mp-paper: #F6F6F4;
  --mp-mist: #ECECEA;
  --mp-line: #DEDEDB;
  --mp-gray: #8B8D91;
  --mp-gray-strong: #56585C;

  /* ---------- Семантичні аліаси ---------- */
  --accent: var(--mp-yellow);
  --accent-hover: var(--mp-yellow-bright);
  --accent-press: var(--mp-yellow-deep);
  --on-accent: var(--mp-black);

  --surface-page: var(--mp-ink);
  --surface-card: var(--mp-charcoal);
  --surface-raised: var(--mp-slate);
  --border-hairline: var(--mp-slate);
  --text-primary: var(--mp-white);
  --text-secondary: #B9BCC2;
  --text-muted: var(--mp-graphite);

  /* ---------- Типографіка ---------- */
  --font-display: "Benzin", "Arial Narrow", system-ui, sans-serif;
  --font-text: "RockStar", "Segoe UI", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: clamp(44px, 6vw, 80px);
  --fs-h1: clamp(32px, 4.2vw, 56px);
  --fs-h2: clamp(26px, 3vw, 40px);
  --fs-h3: clamp(20px, 2.2vw, 28px);
  --fs-h4: 21px;
  --fs-title: 17px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-label: 0.14em;
  --ls-wide: 0.06em;

  /* ---------- Простір ---------- */
  --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;
  --space-32: 128px;

  /* ---------- Радіуси ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-card: 30px;   /* плитки бенто-сітки, макет MegaParkCityCard */
  --radius-pill: 999px;

  /* ---------- Контейнери ---------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1424px;

  /* ---------- Штрихи ---------- */
  --border-thin: 1px;
  --border-med: 2px;
  --border-bold: 3px;

  /* ---------- Тіні та сяйво ---------- */
  --shadow-sm: 0 1px 2px rgba(14, 15, 17, 0.08);
  --shadow-md: 0 4px 14px rgba(14, 15, 17, 0.10);
  --shadow-lg: 0 14px 40px rgba(14, 15, 17, 0.14);
  --glow-yellow-soft: 0 6px 24px rgba(248, 234, 51, 0.28);
  --glow-yellow-strong: 0 8px 32px rgba(248, 234, 51, 0.45);
  --focus-shadow: 0 0 0 3px rgba(248, 234, 51, 0.55);

  /* ---------- Рух ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* Світлий контекст — для друку та контентних сторінок на папері. */
.mp-light {
  --surface-page: var(--mp-paper);
  --surface-card: var(--mp-white);
  --surface-raised: var(--mp-mist);
  --border-hairline: var(--mp-line);
  --text-primary: var(--mp-ink);
  --text-secondary: var(--mp-gray-strong);
  --text-muted: var(--mp-gray);
}