/* ==========================================================================
   tokens.css - design tokens for the naro games site
   Everything visual is defined here once. Change a value here, the whole
   site follows. No component file should hard-code a color or a font.
   ========================================================================== */

:root {
  /* ---------- brand ---------- */
  --c-cyan: #3fe0ff;        /* primary accent - CTAs, links, highlights */
  --c-cyan-bright: #7aecff; /* primary hover                            */
  --c-red: #ff4d6d;         /* secondary accent - "in development"     */

  /* ---------- surfaces ---------- */
  --bg-page: #070b14;
  --bg-deep: #040711;
  --bg-panel: #0c1424;

  /* ---------- text (all pass 4.5:1 on --bg-page) ---------- */
  --text: #eef3ff;
  --text-muted: #a9b6d0;
  --text-dim: #7f8ca8;
  --text-ink: #04141b;      /* dark text used on bright accent surfaces */

  /* ---------- lines ---------- */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* ---------- typography ---------- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* modular scale, ratio 1.25 */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5625rem;
  --fs-xl: 1.953rem;
  --fs-2xl: 2.441rem;
  --fs-3xl: 3.052rem;
  --fs-4xl: 3.815rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  --tracking-wide: 0.14em;
  --tracking-tight: -0.02em;

  /* ---------- space ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---------- shape ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---------- structure ---------- */
  --maxw: 1200px;
  --maxw-wide: 1440px;
  --gutter: var(--sp-5);
  --nav-h: 72px;

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --t-fast: 140ms;
  --t-mid: 260ms;
  --t-slow: 460ms;
  --t-swipe: 620ms; /* one hero slide pushing the last one off screen */

  /* ---------- elevation (neutral, never coloured glow) ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 26px 60px rgba(0, 0, 0, 0.55);
}