/* 
  VULCAN DESIGN SYSTEM - TOKENS
  Architecture: Primitives -> Semantics
*/

:root {
  /* --- PRIMITIVES --- */
  
  /* Color Palettes */
  --p-color-black: #000000;
  --p-color-vulcan: #050505;
  --p-color-neon-green: #00EE81;
  --p-color-cyan: #00D2FF;
  --p-color-solar-orange: #FF5C00;
  
  /* Grays (Vulcan Scale) */
  --p-color-gray-50: #F5F5F5;
  --p-color-gray-100: #E5E5E5;
  --p-color-gray-200: #D4D4D4;
  --p-color-gray-300: #A3A3A3;
  --p-color-gray-400: #737373;
  --p-color-gray-500: #525252;
  --p-color-gray-600: #404040;
  --p-color-gray-700: #262626;
  --p-color-gray-800: #171717;
  --p-color-gray-900: #0A0A0A;
  --p-color-gray-950: #050505;

  /* Spacing Scale (4px base) */
  --p-space-1: 0.25rem;  /* 4px */
  --p-space-2: 0.5rem;   /* 8px */
  --p-space-3: 0.75rem;  /* 12px */
  --p-space-4: 1rem;     /* 16px */
  --p-space-5: 1.25rem;  /* 20px */
  --p-space-6: 1.5rem;   /* 24px */
  --p-space-8: 2rem;     /* 32px */
  --p-space-10: 2.5rem;  /* 40px */
  --p-space-12: 3rem;    /* 48px */
  --p-space-16: 4rem;    /* 64px */
  --p-space-20: 5rem;    /* 80px */
  --p-space-24: 6rem;    /* 96px */

  /* Typography */
  --p-font-display: 'Space Grotesk', sans-serif;
  --p-font-body: 'Inter', sans-serif;
  --p-font-mono: 'JetBrains Mono', monospace;
  
  --p-font-size-xs: 0.75rem;
  --p-font-size-sm: 0.875rem;
  --p-font-size-md: 1rem;
  --p-font-size-lg: 1.125rem;
  --p-font-size-xl: 1.25rem;
  --p-font-size-2xl: 1.5rem;
  --p-font-size-3xl: 2rem;
  --p-font-size-4xl: 2.5rem;
  --p-font-size-5xl: 3rem;
  --p-font-size-hero: 5rem;

  /* Border Radius */
  --p-radius-xs: 0.125rem;
  --p-radius-sm: 0.25rem;
  --p-radius-md: 0.375rem;
  --p-radius-lg: 0.5rem;
  --p-radius-xl: 0.75rem;
  --p-radius-full: 9999px;

  /* --- SEMANTICS --- */

  /* Surface Colors */
  --s-color-surface: var(--p-color-vulcan);
  --s-color-surface-container-low: #1C1B1B;
  --s-color-surface-container: #131313;
  --s-color-surface-container-high: #1E1E1E;
  --s-color-surface-glass: rgba(30, 30, 30, 0.4);
  
  /* Brand Colors */
  --s-color-primary: var(--p-color-neon-green);
  --s-color-on-primary: var(--p-color-black);
  --s-color-secondary: var(--p-color-cyan);
  --s-color-on-secondary: var(--p-color-black);
  --s-color-accent: var(--p-color-solar-orange);

  /* Functional Colors */
  --s-color-error: #FF3B30;
  --s-color-warning: #FFCC00;
  --s-color-success: var(--p-color-neon-green);
  --s-color-info: var(--p-color-cyan);
  
  /* Text Colors */
  --s-color-text-primary: #FFFFFF;
  --s-color-text-secondary: var(--p-color-gray-400);
  --s-color-text-tertiary: var(--p-color-gray-500);
  --s-color-text-on-brand: var(--p-color-black);

  /* Elevation & Glass */
  --s-glass-blur: 12px;
  --s-glass-border: rgba(59, 74, 61, 0.15); /* outline-variant at 15% */
  --s-glow-primary: 0 0 20px rgba(0, 238, 129, 0.2);
  --s-glow-secondary: 0 0 20px rgba(0, 210, 255, 0.2);

  /* Animation Easings */
  --s-ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
  --s-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --s-motion-duration-fast: 200ms;
  --s-motion-duration-medium: 400ms;
  --s-motion-duration-slow: 700ms;
}