/* ==========================================================================
   CAKRA NOC - Precision Network Telemetry Design Tokens
   AntiSlop Standard: Obsidian Slate Dark & Clean Precision Light
   High contrast, crisp 1px hairline borders, calibrated status semantics.
   ========================================================================== */

:root,
[data-theme="dark"],
html.dark {
  /* Surface & Backgrounds (Obsidian Slate Dark) */
  --bg-app: #090d16;             /* Obsidian Deep Canvas */
  --bg-base: #090d16;            /* Base Canvas Alias */
  --bg-canvas: #090d16;          /* Topology Canvas Base */
  --bg-surface: #0f172a;         /* Elevated Container & Card */
  --bg-card: #0f172a;            /* Card Background */
  --bg-card-elevated: #152138;   /* Elevated Card Surface */
  --bg-surface-elevated: #152138;
  --bg-surface-hover: #1e293b;   /* Row / Card Hover State */
  --bg-surface-subtle: #111c30;  /* Subtle Inset */
  --bg-panel: #131c31;           /* Table Header, Drawer & Recessed Bar */
  --bg-input: #0b1120;           /* Recessed Form Input */
  --bg-active-tab: #1e293b;      /* Active Tab / Button */
  --bg-primary: #0f172a;         /* Primary Surface Alias */
  --accent-color: #38bdf8;       /* Electric Cyan Accent */

  /* Borders & Dividers (Crisp Hairlines) */
  --border-color: #223249;       /* Hairline Primary Border (1px) */
  --border-subtle: #182638;      /* Inner Subtle Divider */
  --border-focus: #38bdf8;       /* Electric Cyan Focus Ring */

  /* Typography & Foreground (High Contrast & WCAG AA Compliant) */
  --text-primary: #f8fafc;       /* Crisp White-Neutral (Contrast > 14:1) */
  --text-main: #f8fafc;          /* Main Text Alias */
  --text-secondary: #94a3b8;     /* Cool Muted Slate (Contrast ~ 7:1) */
  --text-muted: #64748b;         /* Subdued Steel (Contrast > 4.5:1) */
  --text-inverse: #090d16;       /* Dark Text on Light Elements */

  /* Status Semantics (Network Monitoring Standards) */
  --status-up: #10b981;
  --status-up-bg: rgba(16, 185, 129, 0.12);
  --status-up-border: rgba(16, 185, 129, 0.3);

  --status-warning: #f59e0b;
  --status-warning-bg: rgba(245, 158, 11, 0.12);
  --status-warning-border: rgba(245, 158, 11, 0.3);

  --status-down: #ef4444;
  --status-down-bg: rgba(239, 68, 68, 0.12);
  --status-down-border: rgba(239, 68, 68, 0.3);

  --status-unknown: #64748b;
  --status-unknown-bg: rgba(100, 116, 139, 0.12);
  --status-unknown-border: rgba(100, 116, 139, 0.3);

  --status-info: #0ea5e9;
  --status-info-bg: rgba(14, 165, 233, 0.12);
  --status-info-border: rgba(14, 165, 233, 0.3);

  /* Brand & Actions (Cyan / Deep Indigo Signature) */
  --brand-primary: #0284c7;        /* Solid Sky Blue Primary */
  --brand-primary-text: #ffffff;   /* Pure White Action Text */
  --brand-primary-hover: #0369a1;  /* Darker Sky Hover */
  --brand-cyan: #38bdf8;           /* Crisp Cyan Accent */
  --brand-accent: #38bdf8;
  --brand-ocean: #0284c7;
  --brand-dark: #090d16;
  --brand-slate: #0f172a;
  --brand-steel: #334155;
  --brand-powder: #94a3b8;
  --brand-neutral: #f8fafc;

  /* Speedtest / KPI Specific Variables */
  --st-brand-color: #0284c7;
  --st-online-pill-bg: rgba(16, 185, 129, 0.15);
  --st-online-pill-border: rgba(16, 185, 129, 0.4);
  --st-online-pill-fg: #10b981;
  --st-card-bg: #0f172a;
  --st-card-border: #223249;
  --st-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --st-active-card-border: #38bdf8;
  --st-active-card-shadow: 0 0 0 1px #38bdf8;
  --st-track-stroke: #1e293b;
  --st-knob-fill: #38bdf8;
  --st-knob-glow: rgba(56, 189, 248, 0.3);
  --st-knob-stroke: #f8fafc;
  --st-text-primary: #f8fafc;
  --st-text-secondary: #94a3b8;
  --st-text-muted: #64748b;

  /* Fonts */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

  /* Controlled Radius (No pill sprawl, strictly functional) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* Transitions */
  --transition-fast: 0.15s ease;
}

/* ==========================================================================
   CAKRA NOC - Clean Precision Light Theme Tokens
   ========================================================================== */
[data-theme="light"],
html.light {
  /* Surface & Backgrounds */
  --bg-app: #f8fafc;             /* Slate 50 Off-White */
  --bg-base: #f8fafc;
  --bg-canvas: #f8fafc;
  --bg-surface: #ffffff;         /* Pure White Surface */
  --bg-card: #ffffff;
  --bg-card-elevated: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-hover: #f1f5f9;   /* Slate 100 Hover */
  --bg-surface-subtle: #f8fafc;
  --bg-panel: #f1f5f9;           /* Slate 100 Recessed Header */
  --bg-input: #ffffff;
  --bg-active-tab: #e2e8f0;
  --bg-primary: #ffffff;
  --accent-color: #0284c7;

  /* Borders & Dividers */
  --border-color: #e2e8f0;       /* Slate 200 Hairline */
  --border-subtle: #f1f5f9;      /* Slate 100 Divider */
  --border-focus: #0284c7;       /* Precision Blue Focus */

  /* Typography & Foreground */
  --text-primary: #0f172a;       /* Slate 900 */
  --text-main: #0f172a;
  --text-secondary: #475569;     /* Slate 600 */
  --text-muted: #64748b;         /* Slate 500 */
  --text-inverse: #ffffff;

  /* Status Semantics */
  --status-up: #059669;
  --status-up-bg: #ecfdf5;
  --status-up-border: #a7f3d0;

  --status-warning: #d97706;
  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;

  --status-down: #e11d48;
  --status-down-bg: #fff1f2;
  --status-down-border: #fecdd3;

  --status-unknown: #64748b;
  --status-unknown-bg: #f1f5f9;
  --status-unknown-border: #e2e8f0;

  --status-info: #0284c7;
  --status-info-bg: #f0f9ff;
  --status-info-border: #bae6fd;

  /* Brand & Actions */
  --brand-primary: #0284c7;
  --brand-primary-text: #ffffff;
  --brand-primary-hover: #0369a1;
  --brand-cyan: #0284c7;
  --brand-accent: #0284c7;
  --brand-ocean: #0284c7;
  --brand-dark: #0f172a;
  --brand-slate: #f1f5f9;
  --brand-steel: #e2e8f0;
  --brand-powder: #475569;
  --brand-neutral: #0f172a;

  /* Speedtest / KPI Specific Variables */
  --st-brand-color: #0284c7;
  --st-online-pill-bg: #ecfdf5;
  --st-online-pill-border: #a7f3d0;
  --st-online-pill-fg: #059669;
  --st-card-bg: #ffffff;
  --st-card-border: #e2e8f0;
  --st-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --st-active-card-border: #0284c7;
  --st-active-card-shadow: 0 0 0 1px #0284c7;
  --st-track-stroke: #e2e8f0;
  --st-knob-fill: #0284c7;
  --st-knob-glow: rgba(2, 132, 199, 0.2);
  --st-knob-stroke: #ffffff;
  --st-text-primary: #0f172a;
  --st-text-secondary: #475569;
  --st-text-muted: #64748b;
}