/* ═══════════════════════════════════════════════════════════════════════════
   AstroTown · Design Token System
   Digital Starfield Aesthetic — v1.0
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --bg-void:      #070810;   /* deepest: starfield canvas */
  --bg-deep:      #0a0b14;   /* main page canvas */
  --bg-surface:   #11131e;   /* card / panel background */
  --bg-raised:    #181b2c;   /* hover / elevated element */
  --bg-overlay:   #1e2138;   /* modal / dropdown */
  --bg-glass:     rgba(17,19,30,0.82); /* frosted glass panels */

  /* ── Nebula Palette ──────────────────────────────────────────────────── */
  --nebula-violet: #7c3aed;
  --nebula-indigo: #4f46e5;
  --nebula-blue:   #1d4ed8;
  --nebula-cyan:   #0891b2;
  --nebula-rose:   #db2777;
  --nebula-amber:  #d97706;
  --nebula-teal:   #0d9488;
  --nebula-green:  #059669;

  /* ── Brand Accent ────────────────────────────────────────────────────── */
  --accent-primary:   #6366f1;  /* Indigo-500 */
  --accent-secondary: #8b5cf6;  /* Violet-500 */
  --accent-glow:      #a78bfa;  /* Violet-400 */
  --accent-pulse:     #c4b5fd;  /* Violet-300 — hover highlights */

  /* ── Functional Colors ───────────────────────────────────────────────── */
  --color-success:  #34d399;
  --color-warning:  #fbbf24;
  --color-error:    #f87171;
  --color-info:     #60a5fa;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:   #f1f5f9;   /* Slate-100 */
  --text-secondary: #94a3b8;   /* Slate-400 */
  --text-muted:     #475569;   /* Slate-600 */
  --text-disabled:  #2d3554;
  --text-inverse:   #0f172a;
  --text-link:      var(--accent-glow);

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border-subtle:  rgba(148,163,184,0.08);
  --border-normal:  rgba(148,163,184,0.14);
  --border-strong:  rgba(148,163,184,0.25);
  --border-accent:  rgba(99,102,241,0.5);
  --border-focus:   #6366f1;

  /* ── Shadows / Glows ─────────────────────────────────────────────────── */
  --shadow-sm:   0 0 10px rgba(99,102,241,0.12);
  --shadow-md:   0 0 24px rgba(99,102,241,0.22);
  --shadow-lg:   0 0 48px rgba(99,102,241,0.30);
  --shadow-glow: 0 0 70px rgba(99,102,241,0.40), 0 0 24px rgba(139,92,246,0.28);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--border-subtle);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.25);

  /* ── Mesh Gradient Presets (GameCube Covers) ─────────────────────────── */
  --mesh-1: radial-gradient(circle at 28% 42%, #7c3aed 0%, transparent 52%),
            radial-gradient(circle at 72% 60%, #1d4ed8 0%, transparent 52%),
            radial-gradient(circle at 50% 82%, #0891b2 0%, transparent 42%),
            #0d0f1a;

  --mesh-2: radial-gradient(circle at 24% 34%, #db2777 0%, transparent 52%),
            radial-gradient(circle at 74% 66%, #f97316 0%, transparent 52%),
            radial-gradient(circle at 50% 52%, #7c3aed 0%, transparent 40%),
            #150d15;

  --mesh-3: radial-gradient(circle at 20% 60%, #059669 0%, transparent 52%),
            radial-gradient(circle at 80% 30%, #0891b2 0%, transparent 52%),
            radial-gradient(circle at 52% 52%, #1d4ed8 0%, transparent 40%),
            #080e12;

  --mesh-4: radial-gradient(circle at 40% 28%, #dc2626 0%, transparent 52%),
            radial-gradient(circle at 60% 72%, #f97316 0%, transparent 52%),
            radial-gradient(circle at 50% 52%, #fbbf24 0%, transparent 36%),
            #160b07;

  --mesh-5: radial-gradient(circle at 30% 32%, #0284c7 0%, transparent 52%),
            radial-gradient(circle at 70% 70%, #6366f1 0%, transparent 52%),
            radial-gradient(circle at 50% 52%, #06b6d4 0%, transparent 36%),
            #070d18;

  --mesh-6: radial-gradient(circle at 36% 50%, #92400e 0%, transparent 52%),
            radial-gradient(circle at 64% 50%, #d97706 0%, transparent 52%),
            radial-gradient(circle at 50% 80%, #7c3aed 0%, transparent 36%),
            #0e0c06;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: "SF Pro Display", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "SF Pro Text",    "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-hero:54px;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.8;

  /* ── Spacing (4px grid) ──────────────────────────────────────────────── */
  --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s8: 32px;  --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-cube: 16px;   /* GameCube canonical radius */
  --r-lg:   20px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --t-enter:  300ms var(--ease-out);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --nav-h:    56px;
  --tabbar-h: 60px;
  --max-w:    1400px;
  --sidebar-w: 280px;
  --player-w:  360px;
  --player-h:  640px;
  --player-ratio: calc(9/16);

  /* ── Z-index layers ──────────────────────────────────────────────────── */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   300;
  --z-toast:   400;
  --z-cursor:  500;
}

/* ── Dark / Reduced-motion overrides ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0ms;
    --t-base:  0ms;
    --t-slow:  0ms;
    --t-enter: 0ms;
  }
}