/**
 * Stratum Dynamics Design Tokens
 * Engineering Grade UX - Precision is the only aesthetic
 */

:root {
  /* ==========================================
     COLORS - High-Vis Construction Protocol
     ========================================== */
  
  /* Backgrounds */
  --bg-primary: #050505;       /* Deep matte black (avoids OLED smear) */
  --bg-secondary: #0a0a0a;     /* Slightly elevated surfaces */
  --bg-tertiary: #111111;      /* Cards, modals */
  --bg-code: #0d1117;          /* Code blocks */
  
  /* Text - High contrast for readability */
  --text-primary: #F0F0F0;     /* 19:1 contrast ratio (AAA) */
  --text-secondary: #A0A0A0;   /* 7:1 contrast ratio (AA) */
  --text-muted: #666666;       /* 4.5:1 minimum (AA) */
  
  /* Accent - Action/Interactive (Safety colors) */
  --accent-orange: #FF4500;    /* Safety Orange - CTAs, alerts */
  --accent-green: #00FF41;     /* Terminal Green - success, active states */
  --accent-blue: #00A8FF;      /* Data highlights, links */
  
  /* Status */
  --danger: #FF3333;           /* Stress indicators, warnings */
  --success: #00FF41;          /* Validation, positive metrics */
  --warning: #FFB800;          /* Caution states */
  
  /* Structural (for visualizations) */
  --cable-passive: #4A90A4;    /* Passive cable color */
  --cable-active: #00FF41;     /* Active tensioned cable */
  --stress-low: #00FF41;       /* Low stress */
  --stress-medium: #FFB800;    /* Medium stress */
  --stress-high: #FF3333;      /* High stress / critical */
  
  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  
  /* Font Families */
  --font-narrative: 'Inter', 'Helvetica Now', system-ui, -apple-system, sans-serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Font Sizes - Modular Scale */
  --text-xs: 0.75rem;          /* 12px - captions */
  --text-sm: 0.875rem;         /* 14px - secondary */
  --text-base: 1rem;           /* 16px - body */
  --text-lg: 1.25rem;          /* 20px - emphasis */
  --text-xl: 1.5rem;           /* 24px - subheadings */
  --text-2xl: 2rem;            /* 32px - headings */
  --text-3xl: 3rem;            /* 48px - hero */
  --text-4xl: 4rem;            /* 64px - display */
  
  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line Heights - WCAG compliant */
  --leading-tight: 1.25;
  --leading-normal: 1.5;       /* WCAG requirement for body text */
  --leading-relaxed: 1.75;
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  
  /* ==========================================
     SPACING
     ========================================== */
  
  --space-1: 0.25rem;          /* 4px */
  --space-2: 0.5rem;           /* 8px */
  --space-3: 0.75rem;          /* 12px */
  --space-4: 1rem;             /* 16px */
  --space-5: 1.5rem;           /* 24px */
  --space-6: 2rem;             /* 32px */
  --space-8: 3rem;             /* 48px */
  --space-10: 4rem;            /* 64px */
  --space-12: 6rem;            /* 96px */
  --space-16: 8rem;            /* 128px */
  
  /* ==========================================
     LAYOUT
     ========================================== */
  
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1440px;
  
  /* Section heights */
  --section-min-height: 100vh;
  --header-height: 4rem;
  
  /* ==========================================
     BREAKPOINTS (for reference in JS)
     ========================================== */
  
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  
  /* ==========================================
     BORDERS & RADII
     ========================================== */
  
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  
  --border-thin: 1px solid var(--text-muted);
  --border-accent: 1px solid var(--accent-orange);
  
  /* ==========================================
     SHADOWS & EFFECTS
     ========================================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(255, 69, 0, 0.3);
  --shadow-glow-green: 0 0 20px rgba(0, 255, 65, 0.3);
  
  /* Focus ring for accessibility */
  --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-orange);
  --focus-ring-inset: inset 0 0 0 2px var(--accent-orange);
  
  /* ==========================================
     TRANSITIONS
     ========================================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-physics: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* ==========================================
     Z-INDEX SCALE
     ========================================== */
  
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  --z-max: 999;
}

/* ==========================================
   REDUCED MOTION PREFERENCES
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-physics: 0ms;
  }
}

/* ==========================================
   HIGH CONTRAST MODE
   ========================================== */

@media (prefers-contrast: high) {
  :root {
    --text-secondary: #D0D0D0;
    --text-muted: #909090;
    --border-thin: 2px solid var(--text-primary);
  }
}