/**
 * Vital Damage Detection Portal semantic design tokens — aligned with
 * Agent OS Command Center Hermes. Local copy only (no runtime dependency
 * on Command Center CSS). See docs/ui/design-tokens.md
 */

:root {
  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 0px;
  --header-height: 64px;
  --page-max-width: 1480px;

  /* Radii */
  --radius-small: 8px;
  --radius-medium: 0.625rem;
  --radius-large: 20px;
  --radius-pill: 999px;

  /* Spacing scale (shared conceptual scale with Command Center / Wiki) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 40px; /* intentional mid-step between 32 and 48 */
  --space-9: 64px;

  /* Type */
  --font-ui: "Inter", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --duration-fast: 0.15s;
  --duration-nav: 0.28s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation */
  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.22);
  --shadow-large: 0 24px 64px rgba(0, 0, 0, 0.35);
  --overlay: rgba(0, 0, 0, 0.55);

  /* Z-index */
  --z-sidebar: 40;
  --z-header: 50;
  --z-drawer: 60;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Focus */
  --focus-ring: #7dd3fc;
}

/* —— Dark (Hermes Ops Console family) —— */
html[data-theme="dark"],
html[data-palette="ops-console"] {
  color-scheme: dark;
  --background: #15151f;
  --background-subtle: #12121a;
  --surface: rgba(24, 24, 34, 0.94);
  --surface-raised: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --surface-selected: rgba(249, 115, 22, 0.12);
  --surface-disabled: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.105);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text-primary: #f4f4f8;
  --text-secondary: #b0b0c0;
  --text-muted: #9696a8;
  --text-disabled: #6b6b7a;
  --accent: #7dd3fc;
  --accent-hover: #9ae0fd;
  --accent-active: #f97316;
  --accent-subtle: rgba(125, 211, 252, 0.12);
  --success: #5ee2b5;
  --success-subtle: rgba(94, 226, 181, 0.14);
  --warning: #f5b544;
  --warning-subtle: rgba(245, 181, 68, 0.14);
  --danger: #f26d6d;
  --danger-subtle: rgba(242, 109, 109, 0.14);
  --info: #7dd3fc;
  --info-subtle: rgba(125, 211, 252, 0.12);
  --offline: #f26d6d;
  --offline-subtle: rgba(242, 109, 109, 0.14);
  --degraded: #f5b544;
  --degraded-subtle: rgba(245, 181, 68, 0.14);
  --focus-ring: #7dd3fc;

  /* Legacy aliases used by portal.css / admin CSS */
  --bg: #15151f;
  --bg-elevated: rgba(24, 24, 34, 0.94);
  --text: #f4f4f8;
  --text-tertiary: #9696a8;
  --portal-accent: #7dd3fc;
  --portal-accent-dim: rgba(125, 211, 252, 0.12);
  --portal-accent-glow: rgba(125, 211, 252, 0.28);
  --portal-surface: rgba(24, 24, 34, 0.94);
  --portal-grid: rgba(255, 255, 255, 0.04);
  --portal-glow-a: rgba(125, 211, 252, 0.08);
  --portal-glow-b: rgba(249, 115, 22, 0.06);
  --sidebar-bg: #15151f;
  --sidebar-border: rgba(255, 255, 255, 0.105);
  --nav-active-bg: rgba(249, 115, 22, 0.12);
  --nav-active-text: #f97316;
  --accent-fill: #7dd3fc;
  --accent-fill-hover: #9ae0fd;
  --accent-on-fill: #15151f;
  --link: #7dd3fc;
  --link-hover: #9ae0fd;
  --search-focus-ring: rgba(125, 211, 252, 0.35);
  --theme-color-meta: #15151f;
  --font: var(--font-ui);
}

/* Align remaining dark palettes toward Hermes surfaces */
html[data-palette="midnight-glass"],
html[data-palette="industrial-slate"],
html[data-palette="field-manual"] {
  --background: var(--bg, #15151f);
  --surface: var(--bg-elevated, rgba(24, 24, 34, 0.94));
  --text-primary: var(--text, #f4f4f8);
  --text-secondary: var(--text-secondary, #a8a8b8);
  --border: var(--border, rgba(255, 255, 255, 0.105));
  --header-height: 64px;
  --sidebar-width: 260px;
}

/* —— Light —— */
html[data-theme="light"],
html[data-palette="apple-clarity"] {
  color-scheme: light;
  --background: #f7f7fb;
  --background-subtle: #eef0f6;
  --surface: #ffffff;
  --surface-raised: #f3f4f8;
  --surface-hover: #ebecef;
  --surface-selected: rgba(2, 132, 199, 0.1);
  --surface-disabled: #f0f0f3;
  --border: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.22);
  --border-subtle: rgba(15, 23, 42, 0.06);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-disabled: #94a3b8;
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --accent-active: #ea580c;
  --accent-subtle: rgba(2, 132, 199, 0.1);
  --success: #059669;
  --success-subtle: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --warning-subtle: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-subtle: rgba(220, 38, 38, 0.12);
  --info: #0284c7;
  --info-subtle: rgba(2, 132, 199, 0.1);
  --offline: #dc2626;
  --offline-subtle: rgba(220, 38, 38, 0.12);
  --degraded: #d97706;
  --degraded-subtle: rgba(217, 119, 6, 0.12);
  --focus-ring: #0284c7;
  --overlay: rgba(15, 23, 42, 0.45);

  --bg: var(--background);
  --bg-elevated: var(--surface);
  --text: var(--text-primary);
  --portal-accent: var(--accent);
  --portal-accent-dim: var(--accent-subtle);
  --portal-accent-glow: rgba(2, 132, 199, 0.25);
  --portal-surface: rgba(255, 255, 255, 0.92);
  --portal-grid: rgba(15, 23, 42, 0.04);
  --portal-glow-a: rgba(2, 132, 199, 0.06);
  --portal-glow-b: rgba(234, 88, 12, 0.05);
  --sidebar-bg: #ffffff;
  --sidebar-border: var(--border);
  --nav-active-bg: var(--surface-selected);
  --nav-active-text: var(--accent-active);
  --accent-fill: var(--accent);
  --accent-fill-hover: var(--accent-hover);
  --accent-on-fill: #ffffff;
  --link: var(--accent);
  --link-hover: var(--accent-hover);
  --theme-color-meta: #f7f7fb;
  --font: var(--font-ui);
}

/* Global focus + type */
html[data-portal-shell="true"] body {
  font-family: var(--font-ui);
}

html[data-portal-shell="true"] :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

html[data-portal-shell="true"] :focus:not(:focus-visible) {
  outline: none;
}

html[data-portal-shell="true"] .portal-mono,
html[data-portal-shell="true"] code,
html[data-portal-shell="true"] kbd,
html[data-portal-shell="true"] .portal-version {
  font-family: var(--font-mono);
}

@media (prefers-reduced-motion: reduce) {
  html[data-portal-shell="true"] *,
  html[data-portal-shell="true"] *::before,
  html[data-portal-shell="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}