/* ==========================================================================
   TNS design tokens — single source of truth for colour, type, radius,
   shadow and motion across every page that extends dashboard/base.html.

   Light values live on :root, dark values on [data-theme="dark"], so ONE
   stylesheet serves both modes and there is no flash of the wrong theme.

   This file is loaded AFTER theme-light.css / theme-dark.css so its :root
   block wins over the legacy token values, while the legacy component
   rules in those files keep working — they all read the same names.

   Naming:
     • Semantic tokens  (--bg, --surface, --text, --border, --primary …) are
       the ones to use in NEW code.
     • Legacy tokens    (--dark-bg, --darker-bg, --card-bg, --text-light …)
       are kept as aliases so the ~170 existing templates keep rendering.
       Their names were inverted in light mode (--dark-bg was white); they
       now resolve to the semantic token that matches their actual USE.
     • Ad-hoc tokens    (--accent, --muted, --surface2, --radius-md …) were
       invented independently by ~46 templates. They are defined here so
       pages that reference them without defining them get a sane value.
       Pages that DO define them locally still win (later source order).
   ========================================================================== */

:root {
  /* ---- Typography -------------------------------------------------- */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  --fs-xs: 0.6875rem;   /* 11px */
  --fs-sm: 0.75rem;     /* 12px */
  --fs-base: 0.8125rem; /* 13px */
  --fs-md: 0.875rem;    /* 14px */
  --fs-lg: 1rem;        /* 16px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */

  /* ---- Radius / shadow / motion ------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.14);
  --shadow-dark: var(--shadow-md);          /* legacy name */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-speed: 0.18s;
  --transition-base: all var(--transition-speed) var(--ease);
  --transition-fast: all 0.12s var(--ease);
  --transition-slow: all 0.3s var(--ease);

  /* ---- Brand ------------------------------------------------------- */
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-rgb: 37, 99, 235;
  --primary-soft: rgba(37, 99, 235, 0.10);
  --primary-contrast: #ffffff;
  --accent: var(--primary-color);
  --accent2: #0891b2;
  --color-primary: var(--primary-color);
  --brand-amber: #d9910b;                    /* favicon gradient start */
  --brand-amber-2: #f5a623;

  /* ---- Semantic status --------------------------------------------- */
  --success-color: #16a34a;
  --warning-color: #f59e0b;
  --danger-color: #dc2626;
  --info-color: #0891b2;
  --secondary-color: #64748b;
  --purple-color: #7c3aed;

  --success-rgb: 22, 163, 74;
  --warning-rgb: 245, 158, 11;
  --danger-rgb: 220, 38, 38;
  --info-rgb: 8, 145, 178;

  --green: var(--success-color);
  --yellow: var(--warning-color);
  --red: var(--danger-color);
  --blue: var(--info-color);
  --purple: var(--purple-color);
  --color-purple: var(--purple-color);
  --noc-purple: var(--purple-color);
  --color-info: var(--info-color);
  --color-danger: var(--danger-color);

  --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  --gradient-success: linear-gradient(135deg, #16a34a, #15803d);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
  --gradient-warn: var(--gradient-warning);
  --gradient-info: linear-gradient(135deg, #0891b2, #0e7490);
  --gradient-purple: linear-gradient(135deg, #7c3aed, #6d28d9);
  --gradient-danger: linear-gradient(135deg, #dc2626, #b91c1c);
  --gradient-secondary: linear-gradient(135deg, #64748b, #475569);
  --color-success: var(--success-color);
  --color-warning: var(--warning-color);

  /* ---- Surfaces (light) -------------------------------------------- */
  --bg: #f3f5f9;                 /* app canvas */
  --bg2: #e9edf3;                /* recessed areas */
  --surface: #ffffff;            /* cards, panels, nav */
  --surface2: #f7f9fc;           /* card headers, table heads, inputs */
  --surface3: #eef2f7;           /* hover rows, chips */
  --bg-overlay: rgba(15, 23, 42, 0.45);
  --hover-bg: #eef2f7;

  --text: #0f172a;
  --text-strong: #020617;
  --text-secondary: #475569;
  --muted: #64748b;
  --text-muted: var(--muted);

  --border: #e2e8f0;
  --border-soft: #e9eef4;
  --border-softer: #f1f4f8;
  --border-strong: #cbd5e1;
  --color-border: var(--border);

  --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.25);

  /* ---- Legacy aliases (kept for the ~170 existing templates) ------- */
  --bg-color: var(--bg);
  --body-color: var(--text);
  --text-color: var(--text);
  --text-light: var(--text);
  --text-lighter: var(--text-strong);
  --card-bg: var(--surface);
  --card-bg-rgb: 255, 255, 255;
  --dark-bg: var(--bg);
  --darker-bg: var(--surface2);
  --dark-card: var(--surface);
  --darker-card: var(--surface2);
  --bg-sidebar: var(--surface);
  --sidebar-bg: var(--surface);
  --accordion-bg: var(--surface2);
  --accordion-border: var(--border);
  --border-color: var(--border);
  --border-light: var(--border-soft);
  --bs-dark-alt: var(--surface2);
  --bs-light-subtle: var(--border-strong);
  --bs-primary-light: var(--primary-color);
  --bs-info-light: var(--info-color);
  --table-striped-bg: #f7f9fc;

  /* ---- Domain status scale (one harmonised set) -------------------- */
  --severity-critical: #dc2626;
  --severity-major: #ea580c;
  --severity-minor: #f59e0b;
  --severity-informational: #0891b2;
  --severity-default: #94a3b8;

  --status-default: #64748b;
  --status-new: #0284c7;
  --status-pending: #f59e0b;
  --status-approved: #16a34a;
  --status-rejected: #dc2626;
  --status-planned: #0891b2;
  --status-assigned: #059669;
  --status-in-progress: #2563eb;
  --status-on-hold: #e11d48;
  --status-cancelled: #7c3aed;
  --status-returned: #6d28d9;
  --status-implemented: #ea580c;
  --status-completed: #0d9488;
  --status-closed: #64748b;
  --status-failed: #dc2626;
  --status-reschedule-tbd: #c026d3;
  --status-interface: #e11d48;

  --execution-not-started: #64748b;
  --execution-in-progress: #2563eb;
  --execution-reschedule-tbd: #c026d3;
  --execution-completed: #0d9488;
  --execution-failed: #dc2626;
  --execution-returned: #6d28d9;

  /* ---- Switch / port view (were undefined before) ------------------ */
  --card-bg-light: var(--surface);
  --border-color-light: var(--border-strong);
  --port-bg-default-light: var(--surface3);
  --port-shadow-light: rgba(15, 23, 42, 0.10);
  --port-shadow-hover-light: rgba(var(--primary-rgb), 0.35);
  --text-color-light: var(--text);
  --text-color-secondary-light: var(--muted);
  --accent-color-light: var(--primary-color);
  --card-bg-dark: var(--surface);
  --border-color-dark: var(--border-strong);
  --port-bg-default-dark: var(--surface3);
  --port-shadow-dark: rgba(15, 23, 42, 0.10);
  --port-shadow-hover-dark: rgba(var(--primary-rgb), 0.35);
  --text-color-dark: var(--text);
  --text-color-secondary-dark: var(--muted);
  --accent-color-dark: var(--primary-color);

  /* ---- vis-network topology ---------------------------------------- */
  --vis-background: var(--surface);
  --vis-text-color: var(--text);
  --vis-node-bg: #ffffff;
  --vis-node-border: var(--primary-color);
  --vis-node-highlight-bg: var(--surface3);
  --vis-node-highlight-border: var(--primary-hover);
  --vis-edge-color: #94a3b8;
  --vis-edge-highlight-color: var(--primary-color);
  --vis-edge-hover-color: var(--info-color);
  --vis-overlay-bg: rgba(255, 255, 255, 0.72);
  --vis-protocol-ospf: #16a34a;
  --vis-protocol-isis: #7c3aed;
  --vis-protocol-bgp: #dc2626;
  --vis-protocol-lldp: #ea580c;
  --vis-protocol-cdp: #0891b2;
  --vis-protocol-subnet: #64748b;
  --vis-protocol-arp: #94a3b8;
  --vis-protocol-eigrp: #db2777;
  --vis-protocol-default: #64748b;
  --vis-edge-label-color: var(--text);
  --vis-edge-label-stroke: var(--surface);
  --vis-edge-label-bg: rgba(255, 255, 255, 0.85);
  --vis-path-color: var(--primary-color);     /* path finder / selection highlight */
  --vis-spof-color: var(--warning-color);     /* single-uplink devices */
  --vis-dim-opacity: 0.15;                    /* everything outside a spotlight / path */

  /* ---- Layout ------------------------------------------------------ */
  --navbar-h: 56px;
  --sidebar-w: 280px;   /* the one sidebar width: #sidebar and the #mainContent offset both read it */
  --sidebar-w-collapsed: 64px;

  /* ---- Layering (use these, never ad-hoc 9999) --------------------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 1000;
  --z-panel: 1035;        /* slide-over side panels */
  --z-overlay: 1050;
  --z-toast: 1080;
  --z-tooltip: 1090;

  /* ---- Motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  color-scheme: light;
}

/* ==========================================================================
   Dark mode — only the tokens that change.
   ========================================================================== */
[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.60);

  --primary-color: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-rgb: 59, 130, 246;
  --primary-soft: rgba(59, 130, 246, 0.16);

  --success-color: #22c55e;
  --warning-color: #fbbf24;
  --danger-color: #f87171;
  --info-color: #22d3ee;
  --secondary-color: #94a3b8;
  --purple-color: #a78bfa;
  --success-rgb: 34, 197, 94;
  --warning-rgb: 251, 191, 36;
  --danger-rgb: 248, 113, 113;
  --info-rgb: 34, 211, 238;

  --bg: #0b1220;
  --bg2: #070d18;
  --surface: #111a2b;
  --surface2: #16213a;
  --surface3: #1c2942;
  --bg-overlay: rgba(2, 6, 23, 0.65);
  --hover-bg: rgba(255, 255, 255, 0.05);

  --text: #e6edf7;
  --text-strong: #ffffff;
  --text-secondary: #a3b1c6;
  --muted: #7c8ba1;

  --border: #223049;
  --border-soft: #1c2942;
  --border-softer: #172236;
  --border-strong: #2f3f5c;

  --card-bg-rgb: 17, 26, 43;
  --table-striped-bg: #14203a;

  --severity-critical: #f87171;
  --severity-major: #fb923c;
  --severity-minor: #fbbf24;
  --severity-informational: #22d3ee;
  --severity-default: #64748b;

  --status-new: #38bdf8;
  --status-pending: #fbbf24;
  --status-approved: #22c55e;
  --status-rejected: #f87171;
  --status-planned: #22d3ee;
  --status-assigned: #34d399;
  --status-in-progress: #60a5fa;
  --status-on-hold: #fb7185;
  --status-cancelled: #a78bfa;
  --status-returned: #c4b5fd;
  --status-implemented: #fb923c;
  --status-completed: #2dd4bf;
  --status-closed: #94a3b8;
  --status-failed: #f87171;
  --status-reschedule-tbd: #e879f9;
  --status-interface: #fb7185;

  --execution-in-progress: #60a5fa;
  --execution-reschedule-tbd: #e879f9;
  --execution-completed: #2dd4bf;
  --execution-failed: #f87171;
  --execution-returned: #c4b5fd;
  --execution-not-started: #94a3b8;

  --vis-node-bg: var(--surface2);
  --vis-node-border: var(--primary-color);
  --vis-edge-color: #64748b;
  --vis-overlay-bg: rgba(2, 6, 23, 0.55);
  --vis-protocol-ospf: #34d399;
  --vis-protocol-isis: #a78bfa;
  --vis-protocol-bgp: #f87171;
  --vis-protocol-lldp: #fbbf24;
  --vis-protocol-cdp: #22d3ee;
  --vis-protocol-subnet: #94a3b8;
  --vis-protocol-arp: #64748b;
  --vis-protocol-eigrp: #f472b6;
  --vis-protocol-default: #94a3b8;
  --vis-edge-label-bg: rgba(17, 26, 43, 0.85);
  --vis-dim-opacity: 0.12;

  color-scheme: dark;
}