/* ============================================================
   DLS Operations Hub — Design Tokens
   Single source of truth for all visual constants.
   Import BEFORE dashboard.css.
   ============================================================ */
:root {
  /* === COLORS === */
  --blue: #3b6bff;
  --blue-mid: #5080ff;
  --blue-soft: #6b9aff;
  --blue-pale: #8cb0ff;

  --bg: #0a0e1a;
  --bg-card: #111827;
  --bg-card-hover: #172035;
  --bg-elevated: #1c2640;

  --border: #1e2d47;
  --border-hover: rgba(59,107,255,.5);

  --chrome-2: #555;
  --chrome-4: #bbb;

  --t1: #f0f6ff;
  --t2: #b0c4e0;
  --t3: #7088aa;
  --t4: #4a6080;

  --green: #00ffa3;
  --green-dim: rgba(0,255,163,.12);
  --amber: #ffcc00;
  --amber-dim: rgba(255,204,0,.12);
  --red: #ff4466;
  --red-dim: rgba(255,68,102,.12);

  /* === TYPOGRAPHY === */
  --text-xs:  11px;  /* chart ticks, fine print */
  --text-sm:  12px;  /* badges, pills, meta labels, timestamps */
  --text-base: 13px; /* body text, table cells, descriptions */
  --text-md:  14px;  /* card content, form inputs, subtitles */
  --text-lg:  15px;  /* nav tabs, tile titles, section headers */
  --text-xl:  17px;  /* card titles, panel headers */
  --text-2xl: 22px;  /* KPI secondary values */
  --text-3xl: 34px;  /* KPI primary values */

  /* === FONT WEIGHTS === */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* === SPACING === */
  --space-xs:  4px;   /* tight gaps (icon-to-text, badge padding) */
  --space-sm:  8px;   /* element gaps, small padding */
  --space-md:  12px;  /* card content gaps, standard padding */
  --space-lg:  16px;  /* section gaps, card padding */
  --space-xl:  24px;  /* major section separation */
  --space-2xl: 32px;  /* page-level spacing */

  /* === BORDER RADIUS === */
  --radius-sm:   4px;    /* badges, tags, small elements */
  --radius-md:   8px;    /* cards, panels, inputs */
  --radius-lg:   12px;   /* modals, large containers */
  --radius-full: 9999px; /* pills, dots, circles */

  /* === TRANSITIONS === */
  --transition-fast:   0.12s ease;  /* hovers, toggles */
  --transition-normal: 0.2s ease;   /* panel opens, fades */

  /* === SHADOWS === */
  --shadow-sm: 0 0 8px rgba(59,107,255,.08);   /* subtle hover glow */
  --shadow-md: 0 2px 12px rgba(0,0,0,.3);       /* cards, tooltips */
  --shadow-lg: 0 0 16px rgba(59,107,255,.15);   /* active state, focus */
}