/* Tokens copiados 1:1 del prototipo (docs/PROTOTYPE_INVENTORY.md §3.1) —
   paleta oscura + acento lima, ya validada visualmente por el cliente.

   El tema oscuro es el de siempre y el predeterminado. El claro (D-136) redefine los mismos tokens bajo
   `data-tema="claro"`, que pone `js/tema-inicial.js` antes de que se dibuje la página. Nada fuera de este
   archivo debería escribir un color a mano: usar un token (o uno derivado de abajo). */
:root {
  color-scheme: dark;

  --brand-primary: #c8ff00; /* relleno: botones, barras */
  --brand-primary-text: #c8ff00; /* texto, bordes y resaltes sobre el fondo de la página */
  --brand-dark: #0a0a0a;
  --brand-surface: #141414;
  --brand-card: #1c1c1c;
  --brand-border: #2a2a2a;
  --brand-border-strong: #3d3d3d;
  --brand-muted: #555555;
  --brand-text: #e8e8e8;
  --brand-text-dim: #888888;
  --brand-danger: #ff4444;
  --brand-warning: #ffb800;
  --brand-success: #00e676;
  --brand-info: #00b4ff;

  /* Resaltes al pasar el mouse, fondo de los modales y sombras */
  --hover-faint: rgba(255, 255, 255, 0.03);
  --hover-soft: rgba(255, 255, 255, 0.07);
  --hover: rgba(255, 255, 255, 0.08);
  --hover-strong: rgba(255, 255, 255, 0.16);
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-color: rgba(0, 0, 0, 0.5);

  --sidebar-w: 220px;
  --sidebar-w-tablet: 56px;
  --header-h: 56px;
  --header-h-mobile: 52px;
  --bottom-nav-h: 60px;
  --footer-h: 44px;

  --font-title: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* Tema claro (D-136). El acento lima no se lee como texto sobre blanco: el texto y los bordes usan una variante oscura
   (`--brand-primary-text`) y el relleno de los botones conserva el lima. */
:root[data-tema='claro'] {
  color-scheme: light;

  --brand-dark: #eef0f3;
  --brand-surface: #ffffff;
  --brand-card: #ffffff;
  --brand-border: #d5d9e0;
  --brand-border-strong: #b8bfc9;
  --brand-muted: #8a919c;
  --brand-text: #1b1f24;
  --brand-text-dim: #5b6470;
  --brand-primary-text: #4d6b00;
  --brand-danger: #d32f2f;
  --brand-warning: #b26a00;
  --brand-success: #0a8a4a;
  --brand-info: #0a76b0;

  --hover-faint: rgba(0, 0, 0, 0.03);
  --hover-soft: rgba(0, 0, 0, 0.05);
  --hover: rgba(0, 0, 0, 0.06);
  --hover-strong: rgba(0, 0, 0, 0.1);
  --overlay: rgba(15, 20, 25, 0.45);
  --shadow-color: rgba(0, 0, 0, 0.18);
}

/* Fondos translúcidos derivados de los colores de estado: siguen al tema solos. */
:root {
  --tint-success: color-mix(in srgb, var(--brand-success) 15%, transparent);
  --tint-danger: color-mix(in srgb, var(--brand-danger) 15%, transparent);
  --tint-danger-soft: color-mix(in srgb, var(--brand-danger) 8%, transparent);
  --tint-warning: color-mix(in srgb, var(--brand-warning) 15%, transparent);
  --tint-warning-soft: color-mix(in srgb, var(--brand-warning) 10%, transparent);
  --tint-warning-border: color-mix(in srgb, var(--brand-warning) 40%, transparent);
  --tint-info: color-mix(in srgb, var(--brand-info) 15%, transparent);
  --tint-primary: color-mix(in srgb, var(--brand-primary-text) 8%, transparent);
}