/**
 * IQ-SIGNAL-HUB — Design Tokens (v4)
 * Theme: Midnight Gold Command Center
 * Canonical Reference: docs/MASTER_SPEC.md Section 5.1
 */

:root {
  /* Surface & Background Palette */
  --bg: #070B14;
  --surface: #0E1626;
  --surface-2: #141F36;
  --surface-3: #1B2A47;
  --border: #22304D;
  --border-gold: rgba(212, 175, 55, 0.35);

  /* Text & Hierarchy */
  --text: #F4F6FB;
  --text-muted: #B4BED4;
  --text-dim: #8493B0;

  /* Accent Gold Palette */
  --gold: #D4AF37;
  --gold-soft: #F1D27A;
  --gold-deep: #9C7A12;

  /* Status Colors */
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.12);
  --danger: #F43F5E;
  --danger-bg: rgba(244, 63, 94, 0.12);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --info: #38BDF8;
  --info-bg: rgba(56, 189, 248, 0.12);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Elevations & Effects */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-dropdown: 0 16px 40px rgba(0, 0, 0, 0.6);
  --glow-gold: 0 0 0 1px var(--border-gold), 0 0 24px rgba(212, 175, 55, 0.12);
  --glow-danger: 0 0 0 1px rgba(244, 63, 94, 0.4), 0 0 20px rgba(244, 63, 94, 0.2);
  --grad-gold: linear-gradient(135deg, #F1D27A 0%, #D4AF37 55%, #9C7A12 100%);
  --grad-surface: linear-gradient(180deg, #121C31 0%, #0E1626 100%);
  --grad-danger: linear-gradient(135deg, #FB7185 0%, #F43F5E 55%, #BE123C 100%);

  /* Typography */
  --font-family: 'Cairo', system-ui, Tahoma, sans-serif;
  --font-scale: 1; /* normal = 1, large = 1.12, xlarge = 1.25 */
  --font-size-body: calc(18px * var(--font-scale));
  --font-size-label: calc(15px * var(--font-scale));
  --font-size-h3: calc(22px * var(--font-scale));
  --font-size-h2: calc(28px * var(--font-scale));
  --font-size-h1: calc(36px * var(--font-scale));
  --font-size-kpi: calc(48px * var(--font-scale));
  --line-height-ar: 1.7;

  /* Layout Dimensions */
  --sidebar-width: 288px;
  --sidebar-collapsed-width: 80px;
  --topbar-height: 72px;
  --bottom-nav-height: 68px;
  --touch-target-min: 52px;
  --table-row-height-min: 56px;
  --content-max-width: 1600px;
  --transition-speed: 200ms;
}

/* Light Theme Alternative */
[data-theme="light"] {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;
  --border: #CBD5E1;
  --border-gold: rgba(180, 140, 20, 0.4);
  --text: #0F172A;
  --text-muted: #475569;
  --text-dim: #64748B;
  --gold: #B48C14;
  --gold-soft: #D4AF37;
  --gold-deep: #785A05;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.15);
  --glow-gold: 0 0 0 1px var(--border-gold), 0 0 20px rgba(180, 140, 20, 0.15);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}