/* ============================================
   COCKPIT DESIGN SYSTEM - Design Tokens
   Baseado em: Garmin GTN Xi Series
   Para: Smart Navigator (Simuleiros)
   ============================================ */

:root {
  /* === COCKPIT BASE (Smart Navigator palette) === */
  --cockpit-background: #020617;        /* slate-950 - SN brand */
  --cockpit-surface: #0f172a;           /* slate-900 */
  --cockpit-surface-elevated: #1e293b;  /* slate-800 */
  --cockpit-surface-hover: #334155;     /* slate-700 */

  /* === BORDERS (slate tones) === */
  --cockpit-border: #334155;            /* slate-700 */
  --cockpit-border-subtle: #1e293b;     /* slate-800 */
  --cockpit-border-strong: #475569;     /* slate-600 */

  /* === TEXT HIERARCHY (slate scale) === */
  --cockpit-text-primary: #f8fafc;      /* slate-50 */
  --cockpit-text-secondary: #94a3b8;    /* slate-400 */
  --cockpit-text-muted: #64748b;        /* slate-500 */
  --cockpit-text-disabled: #475569;     /* slate-600 */

  /* === SMART NAVIGATOR BRAND === */
  --sn-primary: #38bdf8;                /* sky-400 - SN brand */
  --sn-primary-soft: #0f172a;           /* slate-900 */
  --sn-accent: #a855f7;                 /* purple-500 */

  /* === SEMANTIC COLORS (Garmin Standard) === */
  /* Active/OK - Verde brilhante */
  --cockpit-active: #00ff00;
  --cockpit-active-dim: #00cc00;
  --cockpit-active-bg: rgba(0, 255, 0, 0.1);

  /* Info/Data - Sky (SN Primary) */
  --cockpit-info: #38bdf8;              /* sky-400 - matches SN brand */
  --cockpit-info-dim: #0ea5e9;          /* sky-500 */
  --cockpit-info-bg: rgba(56, 189, 248, 0.1);

  /* Standby/Pending - Amarelo */
  --cockpit-standby: #ffcc00;
  --cockpit-standby-dim: #cc9900;
  --cockpit-standby-bg: rgba(255, 204, 0, 0.1);

  /* Caution/Warning - Âmbar */
  --cockpit-caution: #ff9900;
  --cockpit-caution-dim: #cc7700;
  --cockpit-caution-bg: rgba(255, 153, 0, 0.15);

  /* Critical/Danger - Vermelho */
  --cockpit-critical: #ff0000;
  --cockpit-critical-dim: #cc0000;
  --cockpit-critical-bg: rgba(255, 0, 0, 0.15);

  /* Magenta - Alertas extremos (Ex: Weather EXTREME) */
  --cockpit-extreme: #ff00ff;
  --cockpit-extreme-dim: #cc00cc;
  --cockpit-extreme-bg: rgba(255, 0, 255, 0.15);

  /* === NAVIGATION COLORS (Garmin Specific) === */
  /* Rota ativa */
  --cockpit-route-active: #ff00ff;  /* Magenta */
  /* Waypoint */
  --cockpit-waypoint: #00ffff;      /* Cyan */
  /* Airport */
  --cockpit-airport: #00d4ff;       /* Light Cyan */
  /* VOR/NDB */
  --cockpit-navaid: #00ff00;        /* Green */

  /* === TRAFFIC COLORS (TCAS Standard) === */
  --cockpit-traffic-other: #00ffff;      /* Cyan - Non-threat */
  --cockpit-traffic-proximity: #00ffff;  /* Cyan - Proximity */
  --cockpit-traffic-advisory: #ffcc00;   /* Yellow - Traffic Advisory */
  --cockpit-traffic-resolution: #ff0000; /* Red - Resolution Advisory */

  /* === TERRAIN COLORS (TAWS Standard) === */
  --cockpit-terrain-safe: #000000;       /* Black - Safe */
  --cockpit-terrain-caution: #ffcc00;    /* Yellow - Caution */
  --cockpit-terrain-warning: #ff0000;    /* Red - Warning */

  /* === WEATHER COLORS (Radar Returns) === */
  --cockpit-weather-light: #00ff00;      /* Green - Light precip */
  --cockpit-weather-moderate: #ffff00;   /* Yellow - Moderate */
  --cockpit-weather-heavy: #ff0000;      /* Red - Heavy */
  --cockpit-weather-extreme: #ff00ff;    /* Magenta - Extreme */

  /* === BUTTON VARIANTS === */
  /* Primary Action */
  --cockpit-btn-primary-bg: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  --cockpit-btn-primary-border: #444444;
  --cockpit-btn-primary-text: var(--cockpit-info);

  /* Secondary Action */
  --cockpit-btn-secondary-bg: linear-gradient(180deg, #1f1f1f 0%, #0f0f0f 100%);
  --cockpit-btn-secondary-border: #333333;
  --cockpit-btn-secondary-text: var(--cockpit-text-primary);

  /* Danger Action */
  --cockpit-btn-danger-bg: linear-gradient(180deg, #3a1a1a 0%, #2a0a0a 100%);
  --cockpit-btn-danger-border: #ff0000;
  --cockpit-btn-danger-text: var(--cockpit-critical);

  /* Success/Confirm Action */
  --cockpit-btn-success-bg: linear-gradient(180deg, #1a3a1a 0%, #0a2a0a 100%);
  --cockpit-btn-success-border: #00ff00;
  --cockpit-btn-success-text: var(--cockpit-active);

  /* === DATA DISPLAY === */
  --cockpit-data-label: var(--cockpit-text-secondary);
  --cockpit-data-value: var(--cockpit-text-primary);
  --cockpit-data-unit: var(--cockpit-info);
  --cockpit-data-value-large: 2rem;
  --cockpit-data-value-medium: 1.5rem;
  --cockpit-data-value-small: 1rem;

  /* === TYPOGRAPHY === */
  --cockpit-font-primary: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --cockpit-font-mono: 'Roboto Mono', 'Consolas', monospace;

  /* Font Sizes */
  --cockpit-text-xs: 0.75rem;     /* 12px */
  --cockpit-text-sm: 0.875rem;    /* 14px */
  --cockpit-text-base: 1rem;      /* 16px */
  --cockpit-text-lg: 1.125rem;    /* 18px */
  --cockpit-text-xl: 1.25rem;     /* 20px */
  --cockpit-text-2xl: 1.5rem;     /* 24px */
  --cockpit-text-3xl: 2rem;       /* 32px */
  --cockpit-text-4xl: 2.5rem;     /* 40px */

  /* Font Weights */
  --cockpit-font-normal: 400;
  --cockpit-font-medium: 500;
  --cockpit-font-semibold: 600;
  --cockpit-font-bold: 700;

  /* === SPACING (8px base grid) === */
  --cockpit-space-1: 0.25rem;   /* 4px */
  --cockpit-space-2: 0.5rem;    /* 8px */
  --cockpit-space-3: 0.75rem;   /* 12px */
  --cockpit-space-4: 1rem;      /* 16px */
  --cockpit-space-5: 1.25rem;   /* 20px */
  --cockpit-space-6: 1.5rem;    /* 24px */
  --cockpit-space-8: 2rem;      /* 32px */
  --cockpit-space-10: 2.5rem;   /* 40px */
  --cockpit-space-12: 3rem;     /* 48px */
  --cockpit-space-16: 4rem;     /* 64px */

  /* === TOUCH TARGETS === */
  --cockpit-touch-min: 44px;    /* Mínimo iOS/Android */
  --cockpit-touch-comfortable: 48px;
  --cockpit-touch-large: 60px;  /* Para uso com turbulência */

  /* === BORDER RADIUS === */
  --cockpit-radius-none: 0;
  --cockpit-radius-sm: 2px;
  --cockpit-radius-md: 4px;
  --cockpit-radius-lg: 6px;
  --cockpit-radius-xl: 8px;

  /* === SHADOWS (sutis em cockpit) === */
  --cockpit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --cockpit-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
  --cockpit-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);
  --cockpit-shadow-glow-active: 0 0 8px rgba(0, 255, 0, 0.3);
  --cockpit-shadow-glow-info: 0 0 8px rgba(0, 212, 255, 0.3);
  --cockpit-shadow-glow-caution: 0 0 8px rgba(255, 153, 0, 0.3);
  --cockpit-shadow-glow-critical: 0 0 8px rgba(255, 0, 0, 0.5);

  /* === TRANSITIONS === */
  --cockpit-transition-fast: 100ms ease-out;
  --cockpit-transition-normal: 200ms ease-out;
  --cockpit-transition-slow: 300ms ease-out;

  /* === Z-INDEX SCALE === */
  --cockpit-z-base: 0;
  --cockpit-z-dropdown: 100;
  --cockpit-z-sticky: 200;
  --cockpit-z-modal: 300;
  --cockpit-z-popover: 400;
  --cockpit-z-tooltip: 500;
  --cockpit-z-alert: 600;
}

/* === DAY MODE (maior contraste para luz solar) === */
.cockpit-day {
  --cockpit-background: #1e293b;         /* slate-800 */
  --cockpit-surface: #334155;            /* slate-700 */
  --cockpit-surface-elevated: #475569;   /* slate-600 */
  --cockpit-surface-hover: #64748b;      /* slate-500 */
  --cockpit-border: #64748b;             /* slate-500 */
  --cockpit-border-subtle: #475569;      /* slate-600 */
  --cockpit-border-strong: #94a3b8;      /* slate-400 */
  --cockpit-text-secondary: #e2e8f0;     /* slate-200 */
  --cockpit-text-muted: #cbd5e1;         /* slate-300 */
}

/* === ACCESSIBILITY: Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cockpit-transition-fast: 0ms;
    --cockpit-transition-normal: 0ms;
    --cockpit-transition-slow: 0ms;
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: more) {
  :root {
    --cockpit-border: #666666;
    --cockpit-text-secondary: #ffffff;
    --cockpit-text-muted: #aaaaaa;
  }
}