/* ========================================
   SPINPRO DESIGN SYSTEM - CSS VARIABLES
   ======================================== */

:root {
  /* ===== Light + Green Navigation Theme ===== */
  --page-gradient: linear-gradient(180deg, #fcfcfe 0%, #d0d1d6 100%);
  --nav-top: #051f20;
  --nav-rail: #163832;
  --nav-accent: #00cae8;

  /* Accents */
  --accent-cyan: #00cae8;
  --accent-magenta: #e713b0;
  --accent-green: #01ff14;
  --accent-orange: #ff8203;
  --accent-blue: #15b4ff;
  --accent-purple: #7800ff;
  --accent-gold: #c9980b;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-inverse: #ffffff;

  /* Surfaces */
  --surface-1: #ffffff;
  --surface-2: #f5f5f5;
  --surface-hover: #fafafa;
  --border-color: #e0e0e0;

  /* Glass & Glow */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 202, 232, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  --glow-cyan: 0 0 20px rgba(0, 202, 232, 0.4);
  --glow-magenta: 0 0 20px rgba(231, 19, 176, 0.4);
  --glow-green: 0 0 20px rgba(1, 255, 20, 0.3);
  --glow-orange: 0 0 20px rgba(255, 130, 3, 0.3);
  --glow-purple: 0 0 20px rgba(120, 0, 255, 0.3);

  /* Typography */
  --font-primary: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-primary);
  --font-mono: "Courier New", monospace;

  /* Spacing (Tight) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* ===== APPLY TO BODY ===== */
body {
  background: var(--page-gradient);
  color: var(--text-primary);
  font-family: var(--font-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
}