/* =============================================================================
   NEXILIA NETWORK — tokens.css
   Design tokens shared by every page. Load this first, on every page.

   Kept in exact sync with Nexilia Launcher's own css/main.css tokens (same
   colors, radii, glass, shadows, font stack) so the launcher, the website
   and the store all read as one product family, not three different-looking
   things wearing the same logo.
   ============================================================================= */

:root {
  /* =========================================================================
     BRAND PALETTE — every color below has exactly one job. Before using a
     color anywhere, check its USAGE line; if what you're building isn't on
     that list, reach for --ink/--gray/--bg instead of borrowing a brand
     color for decoration. This is the rule that item 1 of the redesign
     enforces: a color system where color still means something.

     Hex values are unchanged from before — they stay in sync with the
     Launcher's own tokens (same product family). What changed is discipline:
     fewer gradients, fewer glows, and each one now reserved for a single
     named moment instead of being available to any component that wants
     to look "cooler".
     ========================================================================= */
  --bg: #090B12;
  --bg-soft: #0D1019;
  --bg-elevated: #11141F;

  /* Brand identity. USAGE: the logo mark, the primary action button, the
     active nav/tab indicator, gradient hero headlines. Nothing else. */
  --purple: #8A2BE2;
  --violet-deep: #3D1671;
  --purple-soft: rgba(138, 43, 226, 0.35);

  /* System / live data. USAGE: server-online status, links, anything that
     is a real-time value rather than a decoration. */
  --blue: #18B0FF;
  --blue-soft: rgba(24, 176, 255, 0.35);

  /* Premium / currency. USAGE: prices, VIP/rank badges, the store's "buy"
     button. If it isn't about money or rank, it isn't gold. */
  --gold: #FFC876;
  --gold-soft: rgba(255, 200, 118, 0.35);

  --white: #F8F8F8;
  --gray: #A9B2C3;
  --gray-dim: #656D80;
  --success: #2ED47A;
  --danger: #FF4D6D;
  --warning: #FFB347;

  /* Signature gradient. USAGE: reserved for exactly two things sitewide —
     the primary CTA button, and one hero-scale gradient headline per page.
     It is not a default background for icon chips, badges, or "active"
     states anymore; those now use a flat brand color instead, see item 1
     notes in components.css/launcher.css/news.css/store.css/vote.css. */
  --gradient-primary: linear-gradient(120deg, var(--violet-deep) 0%, var(--purple) 48%, var(--blue) 100%);

  /* Item 6 retires the old single "purple blob" radial (--gradient-radial-bg)
     sitewide — see base.css's layered background system (.bg-nebula,
     .bg-volumetric, .bg-dust, .bg-grain, #particlesCanvas) and the
     --cta-glow token just below for where its two former jobs now live. */

  /* Contained ambient backdrop for bordered panels (the CTA band, and any
     future boxed panel that wants a quiet glow behind its own content) —
     scoped to that panel only, never the full page. */
  --cta-glow:
    radial-gradient(ellipse 70% 80% at 20% 0%, var(--purple-soft), transparent 60%),
    radial-gradient(ellipse 60% 70% at 100% 100%, var(--blue-soft), transparent 62%);

  /* ---- Glass surfaces ---- less transparent, less blurred than a typical
     glassmorphism template — panels should read as solid HUD material, not
     frosted bubbles you can barely make out text through. */
  --glass-bg: linear-gradient(165deg, rgba(22, 25, 40, 0.78) 0%, rgba(13, 15, 25, 0.72) 100%);
  --glass-border: rgba(248, 248, 248, 0.09);
  --glass-border-hi: rgba(248, 248, 248, 0.2);
  --glass-blur: 14px;

  /* ---- Elevation ---- */
  --shadow-soft: 0 10px 34px rgba(3, 4, 8, 0.4), inset 0 1px 0 rgba(248, 248, 248, 0.05);
  --shadow-elevated: 0 18px 46px rgba(3, 4, 8, 0.5), inset 0 1px 0 rgba(248, 248, 248, 0.07);

  /* The one glow left sitewide. USAGE: .btn-primary only — the single
     moment on any given page that is allowed to glow, because it's the
     one thing we actually want the eye to jump to. Every other glow that
     used to sit on icons, avatars and badges has been removed in favor of
     flat color, since a glow that appears on everything signals nothing. */
  --shadow-glow-brand: 0 0 24px rgba(138, 43, 226, 0.45);

  /* ---- Radii ---- radius-btn is deliberately tighter than radius-pill:
     buttons should read as solid HUD controls, not iOS-style capsules. */
  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --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;
  --space-10: 140px;

  /* ---- Typography ---- a deliberate 3-role system instead of a system-UI
     stack: Space Grotesk gives the display type a technical, slightly
     architectural character (fits "network/launcher"); Plus Jakarta Sans
     is a warmer grotesque for body copy so long-form text (rules, privacy,
     FAQ) stays easy to read; JetBrains Mono is reserved for anything that
     reads as live data — HUD stats, IP/version, prices, timestamps — so
     numbers sitewide always look like a readout, not prose. */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* ---- Layout ---- */
  --nav-height: 76px;
  --content-max: 1240px;
}