/* Design System - Color Palette & Tokens */
:root {
  /* Brand Colors - Refined dark with blue warmth */
  --primary: #4d9fff;
  --primary-soft: #3d8aff;
  --primary-glow: rgba(77, 159, 255, 0.25);
  --edge-dark: #141820;
  --white: #f0f4f8;
  --accent: #7dd3c0;

  /* Track Colors - Slightly desaturated for sophistication */
  --philosophy: #3de8c0;
  --web3: #d670f0;
  --transdisciplinary: #f5c842;

  /* Glassmorphism Colors */
  --glass-bg: rgba(25, 30, 40, 0.6);
  --glass-bg-solid: rgba(30, 35, 45, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);

  /* Component Colors */
  --card-bg: rgba(28, 33, 43, 0.7);
  --card-border: rgba(77, 159, 255, 0.3);

  /* Layout */
  --radius: 16px;
  --radius-lg: 20px;
  --max-width: 1100px;

  /* Typography */
  --font-mono: 'Space Mono', 'IBM Plex Mono', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Transitions - Refined easing */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows - Softer, more refined */
  --shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--glass-border);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 40px var(--primary-glow);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 60px var(--primary-glow);
}