/**
 * ISPX Design System — Semantic Color Tokens
 * Source of truth for Light / Dark modes.
 * Components must use var(--color-*) — never hardcoded hex.
 */
:root {
  color-scheme: light;
  --font-ui: "Inter", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;

  /* ── Semantic palette (Light) — ISPX brand guide ── */
  --color-bg-body: #ffffff;
  --color-bg-card: #f9fafb;
  --color-brand-accent: #0b4fcf;
  --color-brand-support: #00c2b2;
  --color-text-main: #111827;
  --color-text-muted: #526575;
  --color-state-active: #00c2b2;
  --color-state-warn: #ff9f00;
  --color-topbar-bg: #ffffff;
  /* Afaq lockup: Afaq blue · ISP cyan · Manager teal */
  --color-brand-wordmark-afaq: #0b4fcf;
  --color-brand-wordmark-isp: #0891b2;
  --color-brand-wordmark-manager: #0d9488;
  --color-brand-wordmark: var(--color-brand-wordmark-afaq);
  --color-brand-wordmark-x: var(--color-brand-wordmark-isp);
  --color-brand-tagline: #475569;

  /* Derived surfaces & chrome (from semantic palette) */
  --color-bg-muted: color-mix(in srgb, var(--color-bg-card) 82%, var(--color-text-muted) 18%);
  --color-bg-accent-soft: color-mix(in srgb, var(--color-brand-accent) 12%, var(--color-bg-card) 88%);
  --color-bg-input: #ffffff;
  --color-border-soft: color-mix(in srgb, var(--color-text-muted) 28%, var(--color-bg-card) 72%);
  --color-border-strong: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-bg-card) 55%);
  --color-brand-accent-strong: color-mix(in srgb, var(--color-brand-accent) 82%, #000000 18%);
  --color-brand-support-strong: color-mix(in srgb, var(--color-brand-support) 82%, #000000 18%);
  --color-on-accent: #ffffff;
  --color-state-danger: #d32f2f;
  --color-state-danger-soft: #e57373;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-text-main) 8%, transparent);
  --shadow-soft: 0 16px 40px color-mix(in srgb, var(--color-text-main) 10%, transparent);
  --shadow-panel: 0 22px 60px color-mix(in srgb, var(--color-text-main) 14%, transparent);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --topbar-height: 64px;
  --console-topnav-height: 0px;
  --global-sidebar-width: 260px;
  --global-sidebar-expanded: 260px;
  --context-sidebar-width: 260px;
  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 0px;
  --sidebar-width: 260px;
  --console-rail-global-w: 260px;
  --console-rail-context-w: 0px;
  --console-sidebar-offset: 260px;
  --console-sidebar-w: 260px;
  --sidebar-transition-duration: 0.3s;
  --content-max: 1520px;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --theme-color-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease;

  /* ── Compatibility aliases → semantic tokens ── */
  --brand-navy: var(--color-text-main);
  --brand-blue: var(--color-brand-accent);
  --brand-purple: var(--color-brand-support);

  --bg-canvas: var(--color-bg-body);
  --bg-shell: var(--color-bg-body);
  --bg-elevated: var(--color-bg-card);
  --bg-muted: var(--color-bg-muted);
  --bg-accent-soft: var(--color-bg-accent-soft);
  --bg-input: var(--color-bg-input);

  --text-primary: var(--color-text-main);
  --text-secondary: var(--color-text-muted);
  --text-soft: var(--color-text-muted);

  --border-soft: var(--color-border-soft);
  --border-strong: var(--color-border-strong);

  --primary: var(--color-brand-accent);
  --primary-strong: var(--color-brand-accent-strong);
  --primary-contrast: var(--color-on-accent);
  --accent: var(--color-brand-support);
  --accent-strong: var(--color-brand-support-strong);
  --accent-live: var(--color-brand-accent);

  --success: var(--color-state-active);
  --warning: var(--color-state-warn);
  --danger: var(--color-state-danger);
  --info: var(--color-brand-accent);

  --bg: var(--color-bg-body);
  --surface: var(--color-bg-card);
  --surface-2: var(--color-bg-muted);
  --surface-3: var(--color-bg-accent-soft);
  --text: var(--color-text-main);
  --muted: var(--color-text-muted);
  --border: var(--color-border-soft);
  --shadow: var(--shadow-soft);

  --table-header-bg: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-brand-accent) 12%);
  --table-row-hover: color-mix(in srgb, var(--color-brand-accent) 8%, var(--color-bg-card) 92%);
  --table-row-alt: color-mix(in srgb, var(--color-bg-card) 70%, var(--color-bg-body) 30%);

  --dt-row-hover-rgb: 30, 64, 175;
  --dt-row-stripe-rgb: 249, 250, 251;
  --dt-row-selected-rgb: 30, 64, 175;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-body: #111827;
  --color-bg-card: #1a202c;
  --color-brand-accent: #3b82f6;
  --color-brand-support: #22e0ff;
  --color-text-main: #ffffff;
  --color-text-muted: #b0bec5;
  --color-state-active: #10b981;
  --color-state-warn: #ffb300;
  --color-topbar-bg: #1a202c;
  --color-brand-wordmark-afaq: #5b9bff;
  --color-brand-wordmark-isp: #22e0ff;
  --color-brand-wordmark-manager: #2dd4bf;
  --color-brand-wordmark: var(--color-brand-wordmark-afaq);
  --color-brand-wordmark-x: var(--color-brand-wordmark-isp);
  --color-brand-tagline: #cbd5e1;

  --color-bg-muted: color-mix(in srgb, var(--color-bg-card) 70%, #000000 30%);
  --color-bg-accent-soft: color-mix(in srgb, var(--color-brand-accent) 18%, var(--color-bg-card) 82%);
  --color-bg-input: color-mix(in srgb, var(--color-bg-card) 78%, #000000 22%);
  --color-border-soft: color-mix(in srgb, var(--color-text-muted) 22%, var(--color-bg-card) 78%);
  --color-border-strong: color-mix(in srgb, var(--color-text-muted) 38%, var(--color-bg-card) 62%);
  --color-brand-accent-strong: color-mix(in srgb, var(--color-brand-accent) 78%, #ffffff 22%);
  --color-brand-support-strong: color-mix(in srgb, var(--color-brand-support) 78%, #ffffff 22%);
  --color-on-accent: #111827;
  --color-state-danger: #ef5350;
  --color-state-danger-soft: #e57373;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.35);

  --table-header-bg: color-mix(in srgb, var(--color-bg-muted) 78%, var(--color-brand-accent) 22%);
  --table-row-hover: color-mix(in srgb, var(--color-brand-accent) 10%, var(--color-bg-card) 90%);
  --table-row-alt: color-mix(in srgb, var(--color-bg-muted) 55%, var(--color-bg-card) 45%);

  --dt-row-hover-rgb: 59, 130, 246;
  --dt-row-stripe-rgb: 255, 255, 255;
  --dt-row-selected-rgb: 59, 130, 246;
}