/* ==========================================================================
   PSYNDICA — DESIGN TOKENS
   Assembled from the Psyndica Labs design system (Brand Direction v1.0,
   April 2026): fonts, colors, typography, spacing/motion. Single source of
   truth for the site. Void-black canvas, one-job neon accents, angular
   geometry, glow-over-shadow.
   ========================================================================== */

/* ---- Fonts: Orbitron (display) + Share Tech Mono (body/UI/HUD) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&display=swap');

:root {
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-body: 'Share Tech Mono', ui-monospace, 'SF Mono', monospace;
  --font-mono: 'Share Tech Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Base: void / neutrals -------------------------------------------- */
  --black-0: #000000;
  --void-950: #050505;    /* VOID BLACK — canvas. Never substitute off-black. */
  --void-900: #0a0a0f;    /* default canvas, one hair up from void */
  --panel-dark: #0a0a12;  /* PANEL DARK — UI panel backgrounds, slightly raised */
  --dark-navy: #12122a;   /* DARK NAVY — mid-depth panels / card backgrounds */
  --teal-950: #0d2b3d;
  --teal-900: #123245;
  --void-800: #16222c;
  --void-700: #223244;    /* hairline borders on dark */
  --void-600: #33475a;    /* stronger borders / dividers */
  --void-400: #808080;    /* disabled text on dark */
  --void-300: #606060;    /* DIM GREY — supporting text / metadata / inactive */
  --void-150: #e0e0e0;    /* LIGHT GREY — secondary body text on dark */
  --white-0: #ffffff;

  /* ---- Base: brand hues (per Brand Direction v1) ------------------------ */
  --green-300: #a8ffc0;
  --green-400: #4dff86;
  --green-500: #00ff41;   /* NEON GREEN — SCVRVB signature / system online */
  --green-600: #0fff50;
  --green-800: #0a5c25;
  --green-950: #06210f;

  --cyan-300: #a8ffff;
  --cyan-500: #00ffff;    /* CYAN — data transmission / primary UI accent */
  --cyan-600: #00c9c9;
  --cyan-950: #032626;

  --gold-400: #ffe157;
  --gold-500: #ffd700;    /* SOVEREIGN GOLD — sound money / emphasis only */
  --gold-600: #d9b600;

  --red-400: #ff5c81;
  --red-500: #ff003c;     /* LIVE RED — live/urgent/irreversible only */
  --red-600: #cc002f;
  --red-950: #2a0009;

  --purple-600: #2d1b69;  /* DEEP PURPLE — ambient background depth */
  --purple-950: #0f0a24;

  /* ---- Semantic: surfaces ----------------------------------------------- */
  --surface-canvas: var(--void-950);
  --surface-canvas-deep: var(--black-0);
  --surface-raised: var(--panel-dark);
  --surface-raised-hover: var(--dark-navy);
  --surface-depth: var(--purple-950);
  --surface-depth-strong: var(--purple-600);
  --surface-overlay: rgba(255, 255, 255, 0.04);
  --surface-overlay-strong: rgba(255, 255, 255, 0.08);

  --border-hairline: rgba(255, 255, 255, 0.10);
  --border-hairline-strong: var(--void-600);
  --border-focus: var(--green-500);

  --text-primary: var(--white-0);
  --text-secondary: var(--void-150);
  --text-tertiary: var(--void-300);
  --text-disabled: var(--void-400);
  --text-inverse: var(--void-950);
  --text-on-accent: var(--void-950);

  /* ---- Semantic: accents (glow colors) ---------------------------------- */
  --accent-primary: var(--green-500);
  --accent-primary-bright: var(--green-600);
  --accent-primary-wash: rgba(0, 255, 65, 0.12);
  --glow-primary: 0 0 24px rgba(0, 255, 65, 0.55), 0 0 4px rgba(0, 255, 65, 0.9);

  --accent-secondary: var(--cyan-500);
  --accent-secondary-wash: rgba(0, 255, 255, 0.12);
  --glow-secondary: 0 0 24px rgba(0, 255, 255, 0.5), 0 0 4px rgba(0, 255, 255, 0.85);

  --accent-emphasis: var(--gold-500);
  --accent-emphasis-wash: rgba(255, 215, 0, 0.14);
  --glow-emphasis: 0 0 24px rgba(255, 215, 0, 0.45), 0 0 4px rgba(255, 215, 0, 0.8);

  --accent-live: var(--red-500);
  --accent-live-wash: rgba(255, 0, 60, 0.14);
  --glow-live: 0 0 24px rgba(255, 0, 60, 0.5), 0 0 4px rgba(255, 0, 60, 0.85);

  --focus-ring: 0 0 0 3px rgba(0, 255, 65, 0.35);

  /* ---- Typography scale -------------------------------------------------- */
  --font-size-display-1: 5.5rem;
  --font-size-display-2: 3.5rem;
  --font-size-display-3: 2.25rem;
  --line-height-display-1: 0.95;
  --line-height-display-2: 0.98;
  --line-height-display-3: 1.02;
  --tracking-display: -0.01em;
  --tracking-display-caps: 0.05em;

  --font-size-heading-lg: 1.75rem;
  --font-size-heading-md: 1.375rem;
  --font-size-heading-sm: 1.0625rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body-md: 0.9375rem;
  --font-size-body-sm: 0.8125rem;
  --font-size-label: 0.75rem;
  --line-height-heading: 1.25;
  --line-height-body: 1.5;
  --line-height-label: 1.2;
  --weight-heading: 600;
  --weight-body: 400;
  --tracking-label-caps: 0.08em;

  --font-size-mono-lg: 1.125rem;
  --font-size-mono-md: 0.875rem;
  --font-size-mono-sm: 0.75rem;
  --line-height-mono: 1.4;
  --tracking-mono: 0.02em;

  --text-display-1: 700 var(--font-size-display-1) / var(--line-height-display-1) var(--font-display);
  --text-display-2: 700 var(--font-size-display-2) / var(--line-height-display-2) var(--font-display);
  --text-display-3: 700 var(--font-size-display-3) / var(--line-height-display-3) var(--font-display);
  --text-heading-lg: 600 var(--font-size-heading-lg) / var(--line-height-heading) var(--font-body);
  --text-heading-md: 600 var(--font-size-heading-md) / var(--line-height-heading) var(--font-body);
  --text-heading-sm: 600 var(--font-size-heading-sm) / 1.3 var(--font-body);
  --text-body-lg: 400 var(--font-size-body-lg) / var(--line-height-body) var(--font-body);
  --text-body-md: 400 var(--font-size-body-md) / var(--line-height-body) var(--font-body);
  --text-body-sm: 400 var(--font-size-body-sm) / 1.45 var(--font-body);
  --text-label: 600 var(--font-size-label) / var(--line-height-label) var(--font-body);
  --text-mono-lg: 500 var(--font-size-mono-lg) / var(--line-height-mono) var(--font-mono);
  --text-mono-md: 500 var(--font-size-mono-md) / var(--line-height-mono) var(--font-mono);
  --text-mono-sm: 500 var(--font-size-mono-sm) / var(--line-height-mono) var(--font-mono);

  /* ---- Spacing scale (4px base) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius: angular by default, pills for status/badges only --------- */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 999px;
  --clip-corner: 12px;

  --border-width-hairline: 1px;
  --border-width-emphasis: 1.5px;

  /* ---- Elevation: glow instead of shadow -------------------------------- */
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.65);

  /* ---- Motion: quick, clean, no bounce ---------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1280px;
  --grid-gap: var(--space-6);
}