/* ─── RedLineCAD v2 — Base Design System ─────────────────────────
   Variables, reset, typography, and global utilities.
   All other CSS files import from this foundation.
   ────────────────────────────────────────────────────────────────── */

/* ─── Color Tokens ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --rlc-red:          #cc0000;
  --rlc-red-bright:   #ff2020;
  --rlc-red-dim:      #8a0000;
  --rlc-red-glow:     rgba(204, 0, 0, 0.18);

  /* Backgrounds */
  --bg-base:          #05080f;
  --bg-surface:       #0d1117;
  --bg-elevated:      #161b24;
  --bg-overlay:       #1e2530;
  --bg-hover:         rgba(255,255,255,0.04);
  --bg-active:        rgba(204,0,0,0.12);

  /* Borders */
  --border:           rgba(255,255,255,0.07);
  --border-strong:    rgba(255,255,255,0.14);
  --border-accent:    rgba(204,0,0,0.35);

  /* Text */
  --text-primary:     #e8eaf0;
  --text-secondary:   #8b95a8;
  --text-muted:       #4a5568;
  --text-accent:      #cc0000;
  --text-inverse:     #05080f;

  /* Status colors */
  --status-available: #00cc66;
  --status-busy:      #ffaa00;
  --status-offline:   #4a5568;
  --status-danger:    #ff2020;
  --status-info:      #1a6fff;

  /* Department accent colors */
  --dept-leo:         #1a6fff;
  --dept-ems:         #00cc66;
  --dept-fire:        #ff6600;
  --dept-dispatch:    #9b59b6;
  --dept-admin:       #cc0000;
  --dept-swat:        #2c3e50;
  --dept-civilian:    #16a085;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
  --shadow-red: 0 0 20px rgba(204,0,0,0.25);

  /* Typography */
  --font-sans:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-display:  'Barlow Condensed', 'Inter', system-ui, sans-serif;

  /* Additional accent tokens */
  --accent:        var(--rlc-red);
  --accent-bright: var(--rlc-red-bright);
  --accent-dim:    rgba(204,0,0,0.12);
  --accent-border: rgba(204,0,0,0.35);
  --blue:          #1a6fff;
  --green:         #00cc66;
  --orange:        #ff6600;
  --bg-card:       var(--bg-elevated);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-normal: 220ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-slow:   350ms cubic-bezier(0.23, 1, 0.32, 1);

  /* Z-index layers */
  --z-base:    1;
  --z-dropdown: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-splash:  9999;

  /* Safe areas (overridden by Capacitor on native) */
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left:   env(safe-area-inset-left, 0px);
  --safe-area-right:  env(safe-area-inset-right, 0px);
  --keyboard-height:  0px;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* ─── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.375rem; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; font-weight: 500; }
h6 { font-size: 0.8125rem; font-weight: 500; }

p { color: var(--text-secondary); line-height: 1.6; }

a {
  color: var(--rlc-red);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--rlc-red-bright); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

code { padding: 2px 6px; }

pre {
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--border);
}

/* ─── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ─── Focus ring ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rlc-red);
  outline-offset: 2px;
}

/* ─── Selection ──────────────────────────────────────────────────── */
::selection {
  background: rgba(204,0,0,0.3);
  color: var(--text-primary);
}