/* =========================================================
   variables.css — Design tokens (colors, type, spacing)
   Single source of truth for the visual language.
   ========================================================= */

/* ---------- Font faces ---------- */
@font-face {
  font-family: "UpheavalPro";
  src: url("../fonts/UpheavalPro.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  size-adjust: 120%;
}

@font-face {
  font-family: "Pixeloid Sans Bold";
  src: url("../fonts/pixeloid.sans-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  /* Colors — dark, bold (Metro Boomin / Roy Kafri direction) */
  --color-bg: #0a0a0c;
  --color-bg-alt: #131318;
  --color-surface: #1a1a21;
  --color-border: #2b2b34;
  --color-text: #f5f5f7;
  --color-text-muted: #a6a6b3;
  --color-accent: #7eb6cf;       /* primary CTA / highlight */
  --color-accent-hover: #62a1bf;
  --color-accent-soft: rgba(126, 182, 207, 0.12);

  /* Typography */
  --font-base: "UpheavalPro", "Inter", system-ui, sans-serif;
  --font-en: "Pixeloid Sans Bold", "Inter", system-ui, sans-serif;
  --fs-xs: 0.85rem;
  --fs-sm: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.25rem;
  --fs-xxl: clamp(2.5rem, 6vw, 4.5rem);

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Layout */
  --container-max: 1140px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --header-height: 72px;
}