/* ==========================================================================
   Hostyard Design System · Tokens
   Dark corporate palette: Zinc/Slate neutrals + Royal Blue accent.
   Every color, radius, shadow and motion value used by the UI lives here.
   ========================================================================== */

:root {
  /* ---- Backgrounds (page → shell → elevated surfaces) ------------------ */
  --bg-0: #09090b;
  --bg-1: #0c0e12;
  --bg-2: #12141a;
  --surface-1: #16181d;
  --surface-2: #1c1f26;
  --surface-3: #232730;
  --surface-input: #0f1115;
  --surface-overlay: rgba(9, 9, 11, 0.78);

  /* ---- Hairline borders --------------------------------------------- */
  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.08);
  --border-3: rgba(255, 255, 255, 0.12);
  --border-4: rgba(255, 255, 255, 0.18);
  --border-brand: rgba(59, 130, 246, 0.35);
  --border-brand-soft: rgba(59, 130, 246, 0.18);

  /* ---- Brand accent (Royal / Electric Blue) --------------------------- */
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-active: var(--brand-700);
  --brand-rgb: 59, 130, 246;
  --brand-soft: rgba(59, 130, 246, 0.10);
  --brand-soft-2: rgba(59, 130, 246, 0.16);
  --brand-glow: 0 0 0 1px rgba(59, 130, 246, 0.25), 0 10px 30px -10px rgba(59, 130, 246, 0.55);
  --brand-gradient: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);

  /* ---- Typography colors -------------------------------------------- */
  --text-1: #f8fafc;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #64748b;
  --text-5: #475569;
  --text-on-brand: #ffffff;

  /* ---- Semantic status ---------------------------------------------- */
  --success: #10b981;
  --success-300: #6ee7b7;
  --success-rgb: 16, 185, 129;
  --danger: #ef4444;
  --danger-300: #fca5a5;
  --danger-rgb: 239, 68, 68;
  --warning: #f59e0b;
  --warning-300: #fde68a;
  --warning-rgb: 245, 158, 11;
  --info: #3b82f6;
  --info-rgb: 59, 130, 246;
  --purple: #8b5cf6;
  --purple-300: #c4b5fd;
  --purple-rgb: 139, 92, 246;
  --cyan: #06b6d4;
  --cyan-300: #67e8f9;
  --cyan-rgb: 6, 182, 212;
  --amber: #f59e0b;
  --discord: #5865f2;
  --discord-hover: #4752c4;
  --discord-rgb: 88, 101, 242;

  /* ---- Product tiers ------------------------------------------------ */
  --tier-standard: var(--brand-500);
  --tier-standard-rgb: var(--brand-rgb);
  --tier-premium: var(--cyan);
  --tier-premium-rgb: var(--cyan-rgb);
  --tier-game: var(--purple);
  --tier-game-rgb: var(--purple-rgb);

  /* ---- Typography scale --------------------------------------------- */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --fs-2xs: 0.68rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: clamp(2.5rem, 5vw, 3.75rem);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;

  /* ---- Spacing ------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ---- Radii --------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---- Shadows (elevation) ------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-xl: 0 32px 80px -24px rgba(0, 0, 0, 0.8);

  /* ---- Motion -------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur: 150ms;
  --dur-slow: 260ms;
  --ease: ease-in-out;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 150ms ease-in-out;

  /* ---- Focus ring ---------------------------------------------------- */
  --ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--brand-500);
  --ring-inset: 0 0 0 2px rgba(59, 130, 246, 0.35);

  /* ---- Layout -------------------------------------------------------- */
  --container-w: 1280px;
  --container-pad: 2rem;
  --sidebar-w: 272px;
  --topbar-h: 60px;
  --touch: 44px;
  --z-header: 100;
  --z-dropdown: 500;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 2000;

  /* ---- Legacy aliases (kept so no selector loses its value) ---------- */
  --bg-primary: var(--bg-0);
  --bg-secondary: var(--bg-2);
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-input);
  --bg-dark-slate: var(--bg-1);
  --border-color: var(--border-1);
  --border-glow: var(--border-3);
  --border-blue: var(--border-brand-soft);
  --border-blue-glow: var(--border-brand);
  --accent-cyan: var(--brand-500);
  --accent-blue: var(--brand-400);
  --accent-pink: var(--text-3);
  --accent-purple: var(--surface-3);
  --accent-orange: var(--surface-2);
  --brand-blue: var(--brand-500);
  --brand-blue-hover: var(--brand-700);
  --text-main: var(--text-1);
  --text-muted: var(--text-3);
  --color-success: var(--success);
  --color-danger: var(--danger);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --grad-basic: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  --grad-premium: linear-gradient(135deg, #e2e8f0 0%, #64748b 100%);
  --grad-dark: linear-gradient(135deg, var(--surface-2) 0%, var(--bg-0) 100%);
  --grad-hero: radial-gradient(circle at center, var(--bg-2) 0%, var(--bg-0) 100%);
  --grad-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
  --font-main: var(--font-sans);
  --font-code: var(--font-mono);
  --shadow-neon-blue: var(--shadow-md);
  --shadow-neon-pink: var(--shadow-md);
  --shadow-neon-green: var(--shadow-md);
  --dash-bg: var(--bg-1);
  --dash-sidebar: var(--bg-2);
  --dash-card: var(--surface-1);
  --dash-primary: var(--brand-500);
  --dash-primary-hover: var(--brand-600);
  --dash-text: var(--text-1);
  --dash-text-muted: var(--text-3);
  --dash-border: var(--border-2);
  --dash-green: var(--success);
  --dash-green-bg: rgba(16, 185, 129, 0.15);
  --dash-red: var(--danger);
}