/* PlayServ Design Tokens */
:root {
  /* Surfaces — deep obsidian with violet undertone */
  --bg-0: #08080D;
  --bg-1: #0B0B12;
  --bg-2: #11111B;
  --bg-3: #161622;
  --surface: #171722;
  --surface-2: #1D1D2C;
  --surface-3: #232336;
  --border: #262636;
  --border-strong: #33334A;

  /* Text — all tuned to pass WCAG AA (≥4.5:1) on bg-0 / bg-1 / bg-2. */
  --text-1: #F5F5FA; /* primary */
  --text-2: #C7C7D9; /* body */
  --text-3: #A0A0B8; /* muted — was #8B8BA3 (5.4:1) → now 6.8:1 */
  --text-4: #8585A0; /* dim   — was #5C5C75 (2.9:1, FAIL) → now 4.7:1 */
  --text-5: #6C6C8A; /* extra dim — was #3E3E54 (1.9:1, FAIL) → now 3.4:1 (large-text only) */

  /* Accent — picked from playserv.io logo gradient */
  --accent: #8B5CF6;              /* violet (primary) */
  --accent-hi: #A78BFA;
  --accent-lo: #7C3AED;
  --accent-glow: rgba(139, 92, 246, 0.35);
  --accent-soft: rgba(139, 92, 246, 0.12);

  /* Secondary / data colors */
  --cyan: #22D3EE;
  --cyan-soft: rgba(34, 211, 238, 0.14);
  --emerald: #10B981;
  --emerald-soft: rgba(16, 185, 129, 0.14);
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --rose: #F43F5E;
  --rose-soft: rgba(244, 63, 94, 0.14);
  --pink: #EC4899;
  --blue: #3B82F6;

  /* Module accents (for category colouring) */
  --m-pulse:    #8B5CF6;
  --m-seasons:  #EC4899;
  --m-sync:     #22D3EE;
  --m-edge:     #F59E0B;
  --m-lens:     #10B981;
  --m-vault:    #F43F5E;
  --m-lambda:   #A78BFA;
  --m-canvas:   #60A5FA;
  --m-shield:   #EF4444;
  --m-market:   #F97316;
  --m-passport: #14B8A6;
  --m-forge:    #FB923C;

  /* Platform-pillar accents (v4 — P7 Code / P8 AI / P9 Deploy) */
  --m-code:     #6366F1;    /* indigo — dev tooling */
  --m-ai:       #A3E635;    /* lime — intelligence / future */
  --m-deploy:   #64748B;    /* slate — infrastructure */

  /* Module accents — lighter variants for small text on dark bg (WCAG AA ≥4.5:1) */
  --m-pulse-hi:    #A78BFA;
  --m-seasons-hi:  #F472B6;
  --m-sync-hi:     #67E8F9;
  --m-edge-hi:     #FCD34D;
  --m-lens-hi:     #34D399;
  --m-vault-hi:    #FB7185;
  --m-lambda-hi:   #C4B5FD;
  --m-canvas-hi:   #93C5FD;
  --m-shield-hi:   #F87171;
  --m-market-hi:   #FB923C;
  --m-passport-hi: #2DD4BF;
  --m-forge-hi:    #FDBA74;
  --m-code-hi:     #818CF8;
  --m-ai-hi:       #BEF264;
  --m-deploy-hi:   #94A3B8;

  /* Radii */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 20px 60px -20px var(--accent-glow);

  /* Type families — Aceternity standard: Inter for sans + display, JetBrains
     Mono for code-like text. --font-display is kept as a token (legacy CSS
     references it widely) but routed to Inter so all headings use one face. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type size scale — reference these instead of literal px where possible.
     Base body = 15px (set on html/body). display-* classes use the fluid
     clamp() tokens below. */
  --text-xs:   11px;    /* labels, tags, badges */
  --text-sm:   13px;    /* small body, footer */
  --text-base: 15px;    /* body (matches html default) */
  --text-md:   17px;    /* large body */
  --text-lg:   19px;    /* lead */
  --text-xl:   24px;    /* small headings */
  --text-2xl:  32px;    /* mid headings */
  --text-3xl:  clamp(26px, 3vw, 38px);    /* display-3 */
  --text-4xl:  clamp(34px, 4.5vw, 56px);  /* display-2 */
  --text-5xl:  clamp(44px, 6vw, 82px);    /* display-1 */

  /* Spacing — 8pt rhythm. Use instead of literal px for padding/margin/gap. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Motion — use for hover/transform/opacity transitions, not for keyframe animations. */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 250ms;
  --ease:   cubic-bezier(.2, .8, .2, 1);

  /* Semantic color aliases over the utility palette. Prefer these in new code —
     they communicate intent ("this is an error") rather than hue ("this is rose"). */
  --success:       var(--emerald);
  --success-soft:  var(--emerald-soft);
  --warning:       var(--amber);
  --warning-soft:  var(--amber-soft);
  --danger:        var(--rose);
  --danger-soft:   var(--rose-soft);
  --info:          var(--cyan);
  --info-soft:     var(--cyan-soft);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }

*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--text-1); }

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg-0); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }