/* ═══════════════════════════════════════════════
   FiveM CAD — Base styles
   Loaded on every page. Contains only the reset
   and CSS custom properties (design tokens).
   ═══════════════════════════════════════════════ */

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

:root {
  /* Surfaces */
  --bg:         #0f1319;
  --surface:    #161b24;
  --panel:      #1c2333;
  --panel-alt:  #202840;
  --raised:     #242b3d;

  /* Borders */
  --border:     #2a3548;
  --border2:    #354260;

  /* Accent */
  --accent:     #3b82f6;
  --accent-h:   #2563eb;
  --accent-soft:rgba(59,130,246,0.10);

  /* Status colours */
  --green:      #16a34a;
  --green-soft: rgba(22,163,74,0.12);
  --amber:      #d97706;
  --amber-soft: rgba(217,119,6,0.12);
  --red:        #e53e3e;
  --red-soft:   rgba(229,62,62,0.12);
  --blue:       #2563eb;
  --blue-soft:  rgba(37,99,235,0.10);
  --purple:     #7c3aed;

  /* Third-party brand */
  --discord:    #5865F2;
  --discord-h:  #4752c4;

  /* Text */
  --text:       #e2e8f0;
  --text-dim:   #94a3b8;
  --text-faint: #4a5568;

  /* Fonts */
  --sans:       'IBM Plex Sans', sans-serif;
  --mono:       'IBM Plex Mono', monospace;

  /* Layout */
  --nav-h:      52px;
  --subnav-h:   40px;

  /* Legacy aliases — kept for inline JS templates in dashboard */
  --muted:      #4a5568;
  --muted2:     #64748b;
  --accent2:    #2563eb;
  --panel2:     #242b3d;
}