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

: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) === */
  --cockpit-active: #00ff00;
  --cockpit-active-dim: #00cc00;
  --cockpit-active-bg: rgba(0, 255, 0, 0.1);

  --cockpit-info: #38bdf8;
  --cockpit-info-dim: #0ea5e9;
  --cockpit-info-bg: rgba(56, 189, 248, 0.1);

  --cockpit-standby: #ffcc00;
  --cockpit-standby-dim: #cc9900;
  --cockpit-standby-bg: rgba(255, 204, 0, 0.1);

  --cockpit-caution: #ff9900;
  --cockpit-caution-dim: #cc7700;
  --cockpit-caution-bg: rgba(255, 153, 0, 0.15);

  --cockpit-critical: #ff0000;
  --cockpit-critical-dim: #cc0000;
  --cockpit-critical-bg: rgba(255, 0, 0, 0.15);

  --cockpit-extreme: #ff00ff;
  --cockpit-extreme-dim: #cc00cc;
  --cockpit-extreme-bg: rgba(255, 0, 255, 0.15);

  /* === NAVIGATION COLORS === */
  --cockpit-route-active: #ff00ff;
  --cockpit-waypoint: #00ffff;
  --cockpit-airport: #00d4ff;
  --cockpit-navaid: #00ff00;

  /* === TRAFFIC COLORS (TCAS) === */
  --cockpit-traffic-other: #00ffff;
  --cockpit-traffic-proximity: #00ffff;
  --cockpit-traffic-advisory: #ffcc00;
  --cockpit-traffic-resolution: #ff0000;

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

  --cockpit-text-xs: 0.75rem;
  --cockpit-text-sm: 0.875rem;
  --cockpit-text-base: 1rem;
  --cockpit-text-lg: 1.125rem;
  --cockpit-text-xl: 1.25rem;
  --cockpit-text-2xl: 1.5rem;
  --cockpit-text-3xl: 2rem;
  --cockpit-text-4xl: 2.5rem;

  --cockpit-font-normal: 400;
  --cockpit-font-medium: 500;
  --cockpit-font-semibold: 600;
  --cockpit-font-bold: 700;

  /* === SPACING === */
  --cockpit-space-1: 0.25rem;
  --cockpit-space-2: 0.5rem;
  --cockpit-space-3: 0.75rem;
  --cockpit-space-4: 1rem;
  --cockpit-space-6: 1.5rem;
  --cockpit-space-8: 2rem;

  /* === TOUCH TARGETS === */
  --cockpit-touch-min: 44px;
  --cockpit-touch-comfortable: 48px;
  --cockpit-touch-large: 60px;

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

  /* === SHADOWS === */
  --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-panel: 0 4px 24px rgba(0, 0, 0, 0.4);
  --cockpit-shadow-glow-active: 0 0 8px rgba(0, 255, 0, 0.3);
  --cockpit-shadow-glow-info: 0 0 12px rgba(6, 182, 212, 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: 150ms ease;
  --cockpit-transition-slow: 300ms ease-out;
}

/* === DAY MODE === */
.cockpit-day {
  --cockpit-background: #1e293b;
  --cockpit-surface: #334155;
  --cockpit-surface-elevated: #475569;
  --cockpit-surface-hover: #64748b;
  --cockpit-border: #64748b;
  --cockpit-border-subtle: #475569;
  --cockpit-border-strong: #94a3b8;
  --cockpit-text-secondary: #e2e8f0;
  --cockpit-text-muted: #cbd5e1;
}

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