/* Infin8 Neon UI tokens. Source: Control Panel docs/infin8-design-tokens.json
   (website + desktop profiles) and "Infin8 Apps Neon UI Design System.png".
   Games override only --i8-accent/--i8-accent-2 for per-title tint. */
/* Infin8 display type: Montserrat (SIL OFL 1.1, brand/OFL.txt), self-hosted Latin WOFF2 in 700 and 800.
   Only the weights a page actually renders are downloaded. */
@font-face { font-family: "Infin8 Display"; src: url("brand/montserrat-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Infin8 Display"; src: url("brand/montserrat-latin-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  /* Surfaces: near-black galaxy */
  --i8-base: #070910;
  --i8-base-raised: #0d111c;
  --i8-panel: rgba(17, 22, 36, .82);
  --i8-panel-solid: #111522;
  --i8-panel-alt: #151a2a;
  --i8-line: #242b42;
  --i8-line-soft: rgba(146, 155, 179, .22);

  /* Neon spectrum: cyan -> electric blue -> violet -> magenta */
  --i8-cyan: #4de8ff;
  --i8-cyan-bright: #7ff0ff;
  --i8-cyan-web: #39d7ee;
  --i8-blue: #2f7bff;
  --i8-violet: #8b5cf6;
  --i8-purple: #9b6dff;
  --i8-purple-light: #b9a1ff;
  --i8-magenta: #e64cff;
  --i8-pink: #ff4fc8;
  --i8-accent: var(--i8-cyan);
  --i8-accent-2: var(--i8-magenta);

  /* Text (all >= 4.5:1 on --i8-base and --i8-panel-solid) */
  --i8-text: #edf2ff;
  --i8-text-soft: #d6dced;
  --i8-muted: #a3acc4;
  --i8-on-neon: #ffffff;

  /* Status */
  --i8-success: #5ce6a5;
  --i8-warning: #ffd479;
  --i8-danger: #ff708b;
  --i8-live: #ff3b55;

  /* Gradients */
  --i8-grad: linear-gradient(90deg, var(--i8-cyan) 0%, var(--i8-blue) 34%, var(--i8-violet) 66%, var(--i8-magenta) 100%);
  --i8-grad-diag: linear-gradient(135deg, var(--i8-cyan), var(--i8-blue) 35%, var(--i8-violet) 65%, var(--i8-magenta));
  --i8-grad-cool: linear-gradient(135deg, #1fb8ff, #2f5bff 55%, #5b3df5);
  --i8-grad-hot: linear-gradient(135deg, #8b5cf6, #c43cff 55%, #ff3fd0);
  --i8-grad-ring: conic-gradient(from 0deg, var(--i8-cyan), var(--i8-blue), var(--i8-violet), var(--i8-magenta), var(--i8-cyan));
  --i8-grad-chrome: linear-gradient(180deg, #ffffff 0%, #dfe6f5 38%, #8d97ad 52%, #f4f7ff 70%, #b7c0d4 100%);
  --i8-grad-glass: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,0) 60%);
  --i8-galaxy:
    radial-gradient(ellipse 60% 45% at 12% 18%, rgba(230, 76, 255, .26), transparent 70%),
    radial-gradient(ellipse 55% 50% at 88% 22%, rgba(47, 123, 255, .28), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(139, 92, 246, .22), transparent 70%),
    var(--i8-base);

  /* Glow levels */
  --i8-glow-1: 0 0 8px rgba(77, 232, 255, .35);
  --i8-glow-2: 0 0 14px rgba(77, 232, 255, .42), 0 0 28px rgba(139, 92, 246, .28);
  --i8-glow-3: 0 0 18px rgba(77, 232, 255, .55), 0 0 40px rgba(230, 76, 255, .38);
  --i8-glow-hot: 0 0 14px rgba(230, 76, 255, .55), 0 0 30px rgba(255, 79, 200, .3);
  --i8-shadow: 0 14px 36px rgba(0, 0, 0, .45);
  --i8-inset: inset 0 1px rgba(255, 255, 255, .08);

  /* Glass */
  --i8-glass-blur: 10px;
  --i8-glass-bg: rgba(12, 16, 30, .72);
  --i8-glass-bg-strong: rgba(9, 12, 24, .9);
  --i8-glass-bg-hud: rgba(9, 12, 24, .55);

  /* Shape (radii from tokens.json shape) */
  --i8-r-panel: 14px;
  --i8-r-control: 9px;
  --i8-r-compact: 8px;
  --i8-r-pill: 999px;

  /* Spacing (4px unit) */
  --i8-s1: 4px; --i8-s2: 8px; --i8-s3: 12px; --i8-s4: 16px; --i8-s5: 24px; --i8-s6: 32px;
  --i8-touch: 44px;
  --i8-touch-hud: 48px;

  /* Type scale */
  --i8-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --i8-font-display: "Infin8 Display", Montserrat, var(--i8-font);
  --i8-font-mono: ui-monospace, Consolas, "Cascadia Mono", monospace;
  --i8-fs-xs: 11px; --i8-fs-sm: 13px; --i8-fs-md: 15px; --i8-fs-lg: 19px; --i8-fs-xl: 26px; --i8-fs-2xl: 36px;
  --i8-track: .08em;
  --i8-track-wide: .22em;

  /* Z-layers */
  --i8-z-world: 0;
  --i8-z-hud: 20;
  --i8-z-pads: 30;
  --i8-z-toolbar: 40;
  --i8-z-sheet: 60;
  --i8-z-toast: 80;

  /* Motion */
  --i8-t-fast: 120ms;
  --i8-t-med: 220ms;
  --i8-t-slow: 420ms;
  --i8-t-pulse: 2.6s;
  --i8-t-sweep: 3.8s;
  --i8-t-spin: 1.1s;
  --i8-ease: cubic-bezier(.2, .8, .2, 1);

  /* Safe areas */
  --i8-safe-t: max(10px, env(safe-area-inset-top));
  --i8-safe-r: max(10px, env(safe-area-inset-right));
  --i8-safe-b: max(10px, env(safe-area-inset-bottom));
  --i8-safe-l: max(10px, env(safe-area-inset-left));
}

@media (prefers-reduced-motion: reduce) {
  :root { --i8-t-fast: 0ms; --i8-t-med: 0ms; --i8-t-slow: 0ms; }
}