/* Naija Arcade design tokens */

/* Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt).
   Subset to Latin, Latin-1, Latin Extended-A and the Yoruba/Igbo tone marks, plus typographic
   punctuation. Anything else (emoji, other scripts) falls back per character to the system font.
   Relative URLs, so they inherit the /_v/<deployment>/ prefix and are cached for good. */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../assets/fonts/silkscreen-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../assets/fonts/silkscreen-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Arial resized to Geist's proportions, so text barely moves when Geist swaps in */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 105.85%;
  ascent-override: 94.94%;
  descent-override: 27.87%;
  line-gap-override: 0%;
}

:root {
  /* Colour */
  --bg: #0B0D0C;
  --surface: #141716;
  --surface-2: #111413;
  --border: #232826;
  --border-strong: #2C322F;
  --divider: #1C201E;
  --text: #EDEFEA;
  --text-2: #B4BBB6;
  --text-3: #9AA39E;
  --text-4: #6B746F; /* decorative only, never for readable text */
  --accent: #7CFF4F;
  --on-accent: #0B0D0C;
  --accent-glow: rgba(124, 255, 79, .45);
  --accent-soft: rgba(124, 255, 79, .12);
  --danger: #FF6B5E;
  --danger-soft: rgba(255, 107, 94, .12);

  /* Type */
  --font-pixel: "Silkscreen", ui-monospace, monospace;
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-h2: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 3.9vw, 4.75rem);

  --lh-body: 1.55;
  --tracking-mono: .08em;

  /* 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;

  --gutter: 16px;
  --section: 56px;
  --max: 1280px;
  --header-h: 64px;

  /* Radii */
  --r-btn: 8px;
  --r-input: 10px;
  --r-card: 14px;
  --r-panel: 18px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 150ms;
  --t: 200ms;
  --t-slow: 250ms;

  /* Layers */
  --z-header: 50;
  --z-menu: 60;
  --z-sticky: 40;
  --z-toast: 100;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --section: 96px;
    --header-h: 72px;
  }
}