/* Tokens de Destapa · sistema SODALAB vestido con el brandbook Soda Intelligence Ed01.
   Paleta: Obsidian, Graphite, Paper, White + un solo acento, Signal. Tipografía: Sora (titulares) + Inter (todo lo demás).
   Contrastes calculados (WCAG 2.2) en docs/diseno.md. No cambies los nombres: la app y la web dependen de ellos. */
:root {
  /* Superficies */
  --paper: #f4f1eb;          /* Paper: fondo general (papel natural) */
  --surface: #fcfaf6;        /* White: tarjetas */
  --field: #ffffff;          /* campos de formulario */
  --deep: #0b0d0f;           /* Obsidian: bloques oscuros */
  --deep-2: #262a2d;         /* Graphite */

  /* Texto: los secundarios son la misma tinta con opacidad, así el modo oscuro sale solo */
  --text: #0b0d0f;
  --text-rgb: 11 13 15;
  --text-2: rgb(var(--text-rgb) / .66);   /* 6,0:1 sobre Paper: apto para texto */
  --text-3: rgb(var(--text-rgb) / .45);   /* 3,1:1: solo marcas de agua, deshabilitados, placeholders */
  --line: rgb(var(--text-rgb) / .12);
  --line-2: rgb(var(--text-rgb) / .22);
  --on-deep: #fcfaf6;

  /* Acento único: Signal. Es acción, nunca fondo para todo (≈10 % de la pieza) */
  --accent: #ff6900;
  --accent-rgb: 255 105 0;
  --on-accent: #0b0d0f;      /* Obsidian sobre Signal 6,7:1. Blanco sobre Signal (2,8:1) NO */
  --link: #a84300;           /* Signal oscurecido: 5,4:1 sobre Paper */

  /* Botón primario: el único botón Signal por vista (regla del brandbook) */
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-hover: #ff7d24;
  /* Botón fuerte neutro (cuando no es LA acción de la vista) */
  --btn2-bg: #0b0d0f;
  --btn2-fg: #fcfaf6;

  /* Semánticos de Destapa. Siempre acompañados de texto o ícono, nunca solo color */
  --danger: #b42318;         /* vencido · en mora · urgente — 5,8:1 */
  --warn: #7a5c00;           /* por vencer — 5,6:1 (amarillo oscuro, distinto del naranja de acción) */
  --ok: #0a7a3a;             /* al día · hecho — 4,8:1 */
  --danger-bg: rgb(180 35 24 / .10);
  --warn-bg: rgb(212 160 0 / .16);
  --ok-bg: rgb(10 122 58 / .10);

  /* Forma */
  --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-xl: 36px; --pill: 9999px;
  --shadow: 0 1px 0 rgb(var(--text-rgb) / .06), 0 12px 32px -18px rgb(var(--text-rgb) / .35);
  --pop-bg: #0b0d0f;
  --pop-fg: #fcfaf6;

  /* Tipografía: dos familias, como manda el brandbook (las etiquetas son Inter 600 en mayúsculas) */
  --f-head: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-label: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Movimiento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

:root[data-theme=dark] {
  --paper: #0b0d0f;          /* Obsidian: base y escenario */
  --surface: #15181a;
  --field: #1c1f22;
  --deep: #fcfaf6;
  --deep-2: #d9d6cf;
  --text: #fcfaf6;           /* White sobre Obsidian 18,7:1 */
  --text-rgb: 252 250 246;
  --on-deep: #0b0d0f;
  --link: #ff8a3d;           /* 8,3:1 sobre Obsidian */
  --btn-hover: #ff8a3d;
  --btn2-bg: #fcfaf6;
  --btn2-fg: #0b0d0f;
  --danger: #ff7a6b;
  --warn: #f2c94c;
  --ok: #5bd68a;
  --danger-bg: rgb(255 122 107 / .14);
  --warn-bg: rgb(242 201 76 / .14);
  --ok-bg: rgb(91 214 138 / .14);
  --pop-bg: #fcfaf6;
  --pop-fg: #0b0d0f;
  --shadow: 0 1px 0 #0000004d, 0 16px 36px -20px #000c;
  color-scheme: dark;
}

/* Fuentes propias (licencia SIL Open Font, ver /fonts/OFL-*.txt). Sin Google Fonts: la CSP no lo permite */
@font-face { font-family: "Sora"; src: url("/fonts/sora-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }