/**
 * CSS Custom Properties (Variables)
 *
 * Centralized design tokens for Trenometro frontend.
 * Used for consistent colors, spacing, and delay classification.
 */

:root {
  /* Primary colors */
  --color-primary: #1a365d;
  --color-primary-light: #2c5282;
  --color-primary-dark: #1a202c;

  /* Background colors */
  --color-bg: #f7fafc;
  --color-bg-alt: #edf2f7;
  --color-bg-card: #ffffff;

  /* Text colors */
  --color-text: #1a202c;
  --color-text-muted: #718096;
  --color-text-light: #a0aec0;

  /* Border colors */
  --color-border: #e2e8f0;
  --color-border-dark: #cbd5e0;

  /* Delay category colors */
  --color-delay-green: #22c55e;   /* < 10% delays */
  --color-delay-yellow: #eab308;  /* 10-25% delays */
  --color-delay-orange: #f97316;  /* 25-50% delays */
  --color-delay-red: #ef4444;     /* >= 50% delays */

  /* Severe delay indicator */
  --color-severe: #dc2626;        /* Bold red for severe delays */

  /* Marker properties */
  --marker-size: 12px;
  --marker-border-width: 2px;

  /* Animation timings */
  --blink-duration: 1000ms;       /* Full blink cycle (on + off) */
  --solid-green: 5000ms;          /* Green marker solid phase */
  --solid-yellow: 4000ms;         /* Yellow marker solid phase */
  --solid-orange: 3000ms;         /* Orange marker solid phase */
  --solid-red: 2000ms;            /* Red marker solid phase */

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}