/* Design tokens (decision A7). Everything visual resolves to these variables. The company brand
   colour is injected after this file (--brand, --brand-contrast); the theme is chosen by
   data-theme on <html> ("light" / "dark"), or follows the system when the attribute is absent. */
:root {
  --brand: #2563eb;
  --brand-contrast: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --brand-line: color-mix(in srgb, var(--brand) 35%, transparent);

  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --text: #1b2333;
  --text-muted: #6b7588;
  --border: #e3e7ee;
  --border-strong: #cfd5e0;

  --nav-bg: #111a2e;
  --nav-text: #aab4c8;
  --nav-heading: #69758d;
  --nav-hover: rgba(255, 255, 255, 0.07);

  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
  --info: #2563eb;

  --radius: 10px;
  --radius-sm: 7px;
  --gap: 16px;
  --control-h: 38px;
  --topbar-h: 56px;
  --sidebar-w: 236px;
  --font: system-ui, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e131d; --surface: #171e2b; --surface-2: #1b2331; --text: #e6eaf2; --text-muted: #8f9ab0;
  --border: #263042; --border-strong: #34415a;
  --nav-bg: #0a0f19; --nav-text: #9aa6bd; --nav-heading: #5d6a82;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e131d; --surface: #171e2b; --surface-2: #1b2331; --text: #e6eaf2; --text-muted: #8f9ab0;
    --border: #263042; --border-strong: #34415a;
    --nav-bg: #0a0f19; --nav-text: #9aa6bd; --nav-heading: #5d6a82;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* Layout-specific tokens are overridden in layout-*.css. */