/*
  Cerberus · tokens del sistema visual.
  Piel heredada del Cerberus de escritorio: grafito azulado, acento naranja y estados en puntos.
  El oscuro es el modo por defecto (identidad de Cerberus); el claro se activa con data-theme="light".
  Toda decisión de color, tipo, espacio y radio vive aquí; el resto de hojas solo consume variables.
*/
:root {
  /* Tipografía: Inter para todo, Cascadia Mono para datos técnicos (alojadas en /fonts) */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", ui-monospace, Menlo, monospace;

  --size-brand: 0.9375rem;     /* 15 */
  --size-title: 1.625rem;      /* 26 · Light */
  --size-state: 1.375rem;      /* 22 · SemiBold, espaciado */
  --size-name: 1.125rem;       /* 18 */
  --size-body: 0.875rem;       /* 14 */
  --size-caption: 0.75rem;     /* 12 */
  --size-section: 0.6875rem;   /* 11 · mayúsculas */
  --size-mono: 0.78125rem;     /* 12,5 */

  --weight-title: 300;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  --tracking-brand: 0.4em;     /* 6 px a 15 px */
  --tracking-state: 0.09em;    /* 2 px a 22 px */
  --tracking-section: 0.145em; /* 1,6 px a 11 px */
  --leading: 1.5;

  /* Espacio (escala del escritorio: 4 · 8 · 16 · 24 · 40) */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-sm: 0.75rem;
  --space-m: 1rem;
  --space-ml: 1.25rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  --rail-width: 228px;
  --content-width: 1120px;
  --row-label: 200px;
  --dot: 7px;
  --dot-hero: 12px;
  --icon: 16px;
  --icon-stroke: 1.6;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration: 150ms;
}

/* ── Oscuro (por defecto) ── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1216;
  --surface: #14181e;
  --surface-hover: #1b2029;
  --line: #222832;
  --line-strong: #2f3642;
  --text: #eceef2;
  --text-2: #9aa3b2;
  --text-3: #838c9b;   /* el antiguo #5C6473 no llegaba al contraste mínimo */

  --accent: #ee7f45;
  --accent-hover: #f29561;
  --on-accent: #0f1216;
  --focus: #ee7f45;

  --ok: #3fb27f;
  --warn: #e0a43a;
  --error: #e5534b;
  --busy: #58a6ff;
  --neutral: #838c9b;

  --logo-tile: #171b21;
  --logo-line: #2a303a;
}

/* ── Claro: grises cálidos, superficies blancas y naranja tostado ── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f3f0;
  --surface: #ffffff;
  --surface-hover: #efede9;
  --line: #e3e0da;
  --line-strong: #cfcbc3;
  --text: #1a1d22;
  --text-2: #545a63;
  --text-3: #656b75;

  --accent: #ad4e19;
  --accent-hover: #8f3f12;
  --on-accent: #ffffff;
  --focus: #ad4e19;

  --ok: #23875a;
  --warn: #a86a0c;
  --error: #c63a32;
  --busy: #2f6fc0;
  --neutral: #767c86;

  --logo-tile: #14181e;
  --logo-line: #14181e;
}