/* BZD Financial: tokens de marca. Generado desde brand/tokens.json.
   No editar a mano: cambiar tokens.json y regenerar. */

:root {
  color-scheme: light;
  --surface-100: #f5f7fb;
  --surface-200: #ffffff;
  --surface-300: #e8edf6;
  --ink: #0a1f44;
  --ink-muted: #4f5f7a;
  --hairline: #d5dcea;
  --navy: #0a1f44;
  --brand: #2f6bff;
  --brand-ink: #ffffff;
  --brand-soft: #dbe5ff;
  --link: #1f56e0;
  --positive: #1d7a4a;
  --negative: #b3261e;
  --warning: #8a5a00;
  --focus: #2f6bff;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Tipografía: se cargan con las etiquetas de brand/fonts-head.html */
  --bzd-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --bzd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Tema oscuro: manual con data-theme="dark" o la clase .dark */
[data-theme="dark"],
.dark {
  color-scheme: dark;
  --surface-100: #0a1f44;
  --surface-200: #0f2a5c;
  --surface-300: #163670;
  --ink: #eef2fb;
  --ink-muted: #a9b8d6;
  --hairline: #27427a;
  --navy: #0f2a5c;
  --brand: #2f6bff;
  --brand-ink: #ffffff;
  --brand-soft: #17408f;
  --link: #8db3ff;
  --positive: #5bd08b;
  --negative: #ff8a80;
  --warning: #f2b84b;
  --focus: #8db3ff;
}

/* Tema oscuro automático, salvo que se fije data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    color-scheme: dark;
    --surface-100: #0a1f44;
    --surface-200: #0f2a5c;
    --surface-300: #163670;
    --ink: #eef2fb;
    --ink-muted: #a9b8d6;
    --hairline: #27427a;
    --navy: #0f2a5c;
    --brand: #2f6bff;
    --brand-ink: #ffffff;
    --brand-soft: #17408f;
    --link: #8db3ff;
    --positive: #5bd08b;
    --negative: #ff8a80;
    --warning: #f2b84b;
    --focus: #8db3ff;
  }
}

/* Base */
html { background: var(--surface-100); color: var(--ink); font-family: var(--bzd-font-sans); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tabular { font-variant-numeric: tabular-nums; }