/* ============================================================
   Zero-Stage Music Money — GLOBAL DESIGN SYSTEM
   Single source of truth for the palette + typography.
   Every page must link this file BEFORE its page-specific <style>.

   Fonts are self-hosted (no third-party request, works offline,
   no render-blocking @import chain). The cedi sign (₵) lives in
   its own ~1 KB subset so it never pulls a full latin-ext file.
   ============================================================ */

/* ── Inter (UI/body) ─────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/inter-cedi.woff2') format('woff2');
  unicode-range: U+20B5;
}

/* ── Space Grotesk (display) ─────────────────────────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-cedi.woff2') format('woff2');
  unicode-range: U+20B5;
}

:root {
  color-scheme: dark;

  /* ── Core palette (dark, Gen Z: violet → pink → cyan) ─── */
  --bg: #0a0a0f;            /* page background            */
  --card: #12121a;          /* primary surface            */
  --card2: #171722;         /* secondary surface         */
  --border: #262636;        /* surface borders            */
  --text: #f5f5f7;          /* primary text               */
  --muted: #a1a1ab;         /* secondary text             */
  --tertiary: #71717a;      /* tertiary/fine-print text   */

  /* ── Accents ──────────────────────────────────────────── */
  --violet: #a855f7;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --lime: #a3e635;          /* live/positive signals      */
  --danger: #f87171;        /* warnings & disclaimers     */

  /* ── Signature brand gradient ─────────────────────────── */
  --grad: linear-gradient(90deg, var(--violet) 0%, var(--pink) 50%, var(--cyan) 100%);

  /* ── Shape & typography ───────────────────────────────── */
  --radius: 18px;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', Inter, sans-serif;

  /* ── Legacy aliases (older pages) ───────────────────────
     Keeps previous token names working so every page shares
     one palette without rewriting existing CSS. */
  --panel: var(--bg);
  --panelalt: var(--card);
  --accent: var(--violet);
  --accent2: var(--cyan);
  --line: var(--border);
}

/* ── Global mobile polish ──────────────────────────────────
   Kills the "wobbly web page" tells inside the installed app:
   grey tap flashes, 300 ms tap delay, double-tap zoom, iOS
   text autosizing and accidental text selection on controls. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a, button, summary, [role='button'], input, select, textarea, label {
  touch-action: manipulation;
}
:where(a, button, summary, [role='button']) {
  -webkit-tap-highlight-color: transparent;
}
:where(button, [role='button'], .btn, .tabbar a) {
  -webkit-user-select: none;
  user-select: none;
}
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
::selection {
  background: rgba(168, 85, 247, 0.35);
  color: var(--text);
}

/* Standalone app: no rubber-band refresh/bounce off the page.
   Browser tab keeps native pull-to-refresh. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}

/* Respect the OS motion setting (also stops the pulsing dot). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}