/* ══════════════════════════════════════════════════════
   ROCATRANS Fleet Command — Design System Variables
   rocatransfer.es
══════════════════════════════════════════════════════ */

:root {

  /* ────────────────────────────────
     BRAND TEAL — extraído del logo
  ──────────────────────────────── */
  --brand-900: #021E28;
  --brand-800: #032D3B;
  --brand-700: #043847;
  --brand-600: #054557;
  --brand-500: #064758;
  --brand-400: #0A6070;
  --brand-300: #0D7A8A;

  /* ────────────────────────────────
     BACKGROUNDS — siempre tinte teal
  ──────────────────────────────── */
  --bg-deep:     #020C10;
  --bg-primary:  #061318;
  --bg-card:     #0A1C24;
  --bg-elevated: #0F2530;
  --bg-hover:    #12303C;

  /* ────────────────────────────────
     BORDERS
  ──────────────────────────────── */
  --border:       #153040;
  --border-light: #1E4050;

  /* ────────────────────────────────
     ACCENT — verde neón highlights
  ──────────────────────────────── */
  --accent:        #00E8B8;
  --accent-hover:  #00FFD0;
  --accent-dim:    rgba(0, 232, 184, 0.12);
  --accent-glow:   rgba(0, 232, 184, 0.25);
  --accent-glow2:  rgba(0, 232, 184, 0.08);

  /* ────────────────────────────────
     SEMANTIC COLORS
  ──────────────────────────────── */
  --red:    #EF4444;
  --orange: #FF7043;
  --blue:   #3B82F6;
  --purple: #8B5CF6;
  --gold:   #F59E0B;
  --green:  #10B981;

  /* Dimmed backgrounds */
  --red-dim:    rgba(239, 68,  68,  0.12);
  --orange-dim: rgba(255, 112, 67,  0.12);
  --blue-dim:   rgba(59,  130, 246, 0.12);
  --purple-dim: rgba(139, 92,  246, 0.12);
  --gold-dim:   rgba(245, 158, 11,  0.12);
  --green-dim:  rgba(16,  185, 129, 0.12);
  --muted-dim:  rgba(80,  104, 120, 0.20);

  /* Borders para badges */
  --red-border:    rgba(239, 68,  68,  0.25);
  --orange-border: rgba(255, 112, 67,  0.25);
  --blue-border:   rgba(59,  130, 246, 0.25);
  --purple-border: rgba(139, 92,  246, 0.30);
  --gold-border:   rgba(245, 158, 11,  0.25);
  --green-border:  rgba(16,  185, 129, 0.25);
  --muted-border:  rgba(80,  104, 120, 0.30);

  /* ────────────────────────────────
     PLATAFORMAS
  ──────────────────────────────── */
  --uber-bg:     rgba(255, 255, 255, 0.06);
  --uber-text:   #CCCCCC;
  --uber-border: rgba(255, 255, 255, 0.10);

  --cabify-bg:     rgba(139, 92, 246, 0.12);
  --cabify-text:   #A78BFA;
  --cabify-border: rgba(139, 92, 246, 0.30);

  --bolt-bg:     rgba(52, 208, 88, 0.10);
  --bolt-text:   #34D058;
  --bolt-border: rgba(52, 208, 88, 0.25);

  /* ────────────────────────────────
     TEXT
  ──────────────────────────────── */
  --text-primary:   #E8ECF0;
  --text-secondary: #8A9CAA;
  --text-muted:     #506878;

  /* ────────────────────────────────
     TIPOGRAFÍA
  ──────────────────────────────── */
  --font-display: 'Sora', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* ────────────────────────────────
     LAYOUT
  ──────────────────────────────── */
  --sidebar-width: 260px;
  --topbar-height: 64px;

  /* ────────────────────────────────
     BORDER RADIUS
  ──────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ────────────────────────────────
     TRANSITIONS
  ──────────────────────────────── */
  --transition:      0.18s ease;
  --transition-slow: 0.32s ease;
  --transition-fast: 0.10s ease;

  /* ────────────────────────────────
     SHADOWS
  ──────────────────────────────── */
  --shadow-xs:     0 1px 4px  rgba(0, 0, 0, 0.25);
  --shadow-sm:     0 2px 8px  rgba(0, 0, 0, 0.30);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.40);
  --shadow-modal:  0 8px 48px rgba(0, 0, 0, 0.65);
  --shadow-accent: 0 0 20px   rgba(0, 232, 184, 0.20);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-inner:  inset 0 2px 6px rgba(0, 0, 0, 0.30);

}