/* ==========================================================================
   GuestXpo — Design Tokens (CSS Custom Properties)
   Light & Dark mode values, gradients, and spacing tokens.
   Reference: UX §2 Color System, §3 Typography, §15 Token Reference
   ========================================================================== */

/* ── Google Fonts (Inter + Space Grotesk) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ── Color: Light Mode ── */
  --pulse-violet:     #6C3CE9;
  --signal-magenta:   #E9368C;
  --momentum-orange:  #FF7A3D;
  --mint-confirm:     #2FE6B0;
  --alert-coral:      #FF5470;
  --ink-navy:         #12142B;
  --cloud-white:      #F7F8FC;
  --slate:            #8A8FA3;

  /* Surface (light) */
  --surface-base:     #F7F8FC;
  --surface-elevated: #FFFFFF;
  --text-primary:     #12142B;
  --text-secondary:   #8A8FA3;
  --border-color:     #E7E8F2;

  /* Shadows (light — coloured, never pure black) */
  --shadow-sm: 0 1px 3px rgba(108, 60, 233, 0.08);
  --shadow-md: 0 4px 12px rgba(108, 60, 233, 0.12);
  --shadow-lg: 0 8px 24px rgba(108, 60, 233, 0.15);

  /* ── Gradient ── */
  --pulse-gradient: linear-gradient(135deg, #6C3CE9 0%, #E9368C 55%, #FF7A3D 100%);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  /* ── Radius ── */
  --radius-card:    16px;
  --radius-button:  12px;
  --radius-pill:    9999px;
  --radius-input:   8px;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Sidebar ── */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --topbar-height: 60px;

  /* ── Transitions ── */
  --transition-fast: 200ms ease-out;
  --transition-base: 260ms ease-out;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --surface-base:     #12142B;
  --surface-elevated: #1B1E3A;
  --text-primary:     #F7F8FC;
  --text-secondary:   #A6ABC2;
  --border-color:     #2A2D4D;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --pulse-gradient: linear-gradient(135deg, #5A2EC4 0%, #C92E78 55%, #E0692E 100%);
}