/* DieselHub — tokens de identidade visual (fonte canônica)
   Ver docs/identidade-visual.md */

:root {
  --font-sans: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", monospace;
  --titlebar-height: 36px;
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
}

/* Dark (padrão) + reafirmação explícita via data-theme */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0B0F17;
  --bg-body: var(--bg-app);
  --bg-main: var(--bg-app);
  --bg-titlebar: #07090e;
  --bg-topbar: #07090e;
  --bg-header: #07090e;
  --bg-sidebar: #0B0F17;
  --bg-surface: #131B26;
  --bg-panel: var(--bg-surface);
  --bg-surface-elevated: #16202E;
  --bg-surface-hover: #16202E;
  --bg-input: #0B0F17;
  --input-bg: var(--bg-input);
  --input-border: #223042;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: #223042;
  --border-color: var(--border-medium);
  --sidebar-border: var(--border-medium);
  --text-primary: #F8FAFC;
  --text-main: var(--text-primary);
  --text-readable: var(--text-primary);
  --text-secondary: #94A3B8;
  --text-muted: #94A3B8;
  --text-light: #64748B;
  --brand-primary: #2563EB;
  --brand-secondary: #3B82F6;
  --brand-light: rgba(59, 130, 246, 0.14);
  --status-active: #3dcf8a;
  --status-disabled: #ef6b6b;
  --status-warning: #f0b429;
  --status-neutral: #8ea0b5;
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);
  --toast-bg: #131B26;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(148, 163, 184, 0.28);
  --scrollbar-thumb-hover: rgba(59, 130, 246, 0.55);
  /* Accent Remap (default global) */
  --accent: #ffff00;
  --accent-hover: #ffff66;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-app: #eef2f7;
  --bg-body: var(--bg-app);
  --bg-main: var(--bg-app);
  --bg-titlebar: #cfd7e3;
  --bg-topbar: #cfd7e3;
  --bg-header: #cfd7e3;
  --bg-sidebar: #f7f9fc;
  --bg-surface: #ffffff;
  --bg-panel: var(--bg-surface);
  --bg-surface-elevated: #f4f7fb;
  --bg-surface-hover: #e8eef6;
  --bg-input: #ffffff;
  --input-bg: var(--bg-input);
  --input-border: rgba(16, 24, 40, 0.18);
  --border-subtle: rgba(16, 24, 40, 0.08);
  --border-medium: rgba(16, 24, 40, 0.14);
  --border-color: var(--border-medium);
  --sidebar-border: var(--border-medium);
  --text-primary: #152033;
  --text-main: var(--text-primary);
  --text-readable: var(--text-primary);
  --text-secondary: #4a5870;
  --text-muted: #6b7a90;
  --text-light: #8a97ab;
  --brand-primary: #005b9f;
  --brand-secondary: #0078d4;
  --brand-light: rgba(0, 91, 159, 0.1);
  --status-active: #1a9e5c;
  --status-disabled: #d64545;
  --status-warning: #c98a10;
  --status-neutral: #5c6b80;
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.12);
  --toast-bg: #ffffff;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(100, 116, 139, 0.32);
  --scrollbar-thumb-hover: rgba(0, 120, 212, 0.5);
  --accent: #c9a227;
  --accent-hover: #a88814;
}

/* SOPS: titlebar light um pouco mais clara (doc) */
html[data-theme="light"] body.techsops-web {
  --bg-titlebar: #dfe6ef;
  --bg-header: #dfe6ef;
}