/* ═══════════════════════════════════════════════
   WORK2040 — Design System Tokens
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  /* ── Colors ── */
  --matrix-green: #00FF41;
  --matrix-green-dim: #00CC33;
  --matrix-green-dark: #004D14;
  --matrix-green-bg: rgba(0,255,65,0.03);
  --matrix-green-10: rgba(0,255,65,0.1);
  --matrix-green-20: rgba(0,255,65,0.2);
  --matrix-green-30: rgba(0,255,65,0.3);

  --neon-cyan: #00F0FF;
  --neon-cyan-dim: #00B8C4;
  --neon-cyan-10: rgba(0,240,255,0.1);
  --neon-cyan-20: rgba(0,240,255,0.2);

  --neon-red: #FF3131;
  --neon-red-dim: #CC2828;
  --neon-red-10: rgba(255,49,49,0.1);
  --neon-red-20: rgba(255,49,49,0.2);

  --neon-amber: #FFB800;
  --neon-amber-dim: #CC9300;
  --neon-amber-10: rgba(255,184,0,0.1);

  --neon-purple: #A855F7;
  --neon-purple-10: rgba(168,85,247,0.1);

  --bg-void: #0A0A0F;
  --bg-deep: #0D0D14;
  --bg-panel: rgba(0,255,65,0.03);
  --bg-card: rgba(13,13,20,0.85);
  --bg-glass: rgba(10,10,15,0.7);

  --text-primary: #E0E0E0;
  --text-secondary: #9CA3AF;
  --text-dim: #6B7280;
  --text-bright: #FFFFFF;

  --border-glow: rgba(0,255,65,0.15);
  --border-subtle: rgba(255,255,255,0.06);

  /* ── Typography ── */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-quote: 'Crimson Pro', serif;

  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2.5vw, 1.8rem);
  --fs-h4: clamp(1rem, 2vw, 1.3rem);
  --fs-body: clamp(0.95rem, 1.2vw, 1.15rem);
  --fs-small: clamp(0.8rem, 1vw, 0.9rem);
  --fs-mono: clamp(0.75rem, 0.9vw, 0.85rem);

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* ── Sizing ── */
  --max-width: 1200px;
  --nav-height: 70px;

  /* ── Effects ── */
  --glow-green: 0 0 10px rgba(0,255,65,0.4), 0 0 40px rgba(0,255,65,0.1);
  --glow-cyan: 0 0 10px rgba(0,240,255,0.4), 0 0 40px rgba(0,240,255,0.1);
  --glow-red: 0 0 10px rgba(255,49,49,0.4), 0 0 40px rgba(255,49,49,0.1);
  --glow-text-green: 0 0 10px rgba(0,255,65,0.6);
  --glow-text-cyan: 0 0 10px rgba(0,240,255,0.6);
  --glow-text-red: 0 0 10px rgba(255,49,49,0.6);

  --glass-blur: blur(20px);
  --glass-border: 1px solid var(--border-glow);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-dramatic: 1s cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* ── Base Styles ── */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-void);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-bright);
}

.text-glow { text-shadow: var(--glow-text-green); color: var(--matrix-green); }
.text-glow-cyan { text-shadow: var(--glow-text-cyan); color: var(--neon-cyan); }
.text-glow-red { text-shadow: var(--glow-text-red); color: var(--neon-red); }

.font-mono { font-family: var(--font-mono); }
.font-quote { font-family: var(--font-quote); font-style: italic; }

/* ── Glassmorphism Panel ── */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
}

.glass-panel-strong {
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--matrix-green-20);
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-green);
}

/* ── Scan Lines Overlay ── */
.scan-lines::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Selection ── */
::selection {
  background: var(--matrix-green-30);
  color: var(--text-bright);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--matrix-green-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--matrix-green-dim); }