/* TIFlows POS — tokens de diseño v6. Fuente de verdad: los tokens de la home publicada (frontend/index.html, commit c1135a3). Se carga con un ANTES de styles.css (sin @import). Modo oscuro por defecto; modo claro B (#E6ECF3) con [data-theme="light"] (lo pone theme.js). Los nombres de la sección "Alias de compatibilidad" existen solo para que el HTML y el JS de las páginas que aún no se migraron (var(--text-muted) en style="", ticker.js, etc.) sigan resolviendo; cada uno se elimina cuando no queden usos. */ :root { --navy: #1B3A8C; --cobalt: #2E5BBA; --ice: #DCE5F7; /* Modo oscuro: derivado de la tinta navy #0F1B35 */ --bg: #0F1B35; --bg2: #13224A; --surface: #16264A; --surface2: #1E3160; --surface3: #27407A; --line: rgba(194,204,224,.10); --line2: rgba(194,204,224,.18); --line3: rgba(194,204,224,.30); --text: #EEF2FA; --text2: #B4C2DE; --text3: #8E9DC0; /* 4,65:1 sobre --surface2 (con #8191B5 eran 4,00); solo v6 */ --accent: #5B85DA; --accent-tx: #A9C1F2; --ok: #34B38A; --ok-tx: #6FD3AE; --red: #F0743E; --red-tx: #F79A70; --warn: #E0A93F; /* ámbar: solo "por vencer" y "stock bajo" */ --warn-tx: #E0A93F; --info: #62A5FD; /* azul informativo */ --info-tx: #62A5FD; --on-red: #0F1B35; /* texto sobre un relleno --red (blanco sobre #F0743E da 2,89:1) */ --field-border: #637395; /* borde de campos: 3,60:1 sobre --bg y 3,13:1 sobre --surface */ --btn-primary-edge: var(--accent); /* en oscuro el cobalt sobre --bg da 2,70:1: el borde lo identifica */ --accent-soft: color-mix(in oklab, var(--accent) 18%, transparent); --ok-soft: color-mix(in oklab, var(--ok) 14%, transparent); --red-soft: color-mix(in oklab, var(--red) 14%, transparent); --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent); --info-soft: color-mix(in oklab, var(--info) 14%, transparent); --accent-hover: color-mix(in oklab, var(--accent-tx) 85%, white); --accent-border: color-mix(in oklab, var(--accent) 40%, transparent); --ok-border: color-mix(in oklab, var(--ok) 38%, transparent); --red-border: color-mix(in oklab, var(--red) 38%, transparent); --warn-border: color-mix(in oklab, var(--warn) 38%, transparent); --info-border: color-mix(in oklab, var(--info) 38%, transparent); --r-sm: 8px; --r: 12px; --r-lg: 22px; --f-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; --f-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; /* La home no usa sombras: separa con borde. Solo diálogos y menús flotantes conservan una. */ --shadow-card: none; --shadow-lg: 0 16px 48px rgba(0,0,0,.45); --shadow-focus: 0 0 0 4px var(--accent-soft); /* ── Alias de compatibilidad ──────────────────────────────────── */ --border: var(--line); /* legacy: eliminar cuando no queden usos (ticker.js lo lee) */ --fd: var(--f-body); /* legacy: eliminar cuando no queden usos (ticker.js lo lee) */ --fm: var(--f-body); /* legacy: eliminar cuando no queden usos (ticker.js lo lee) */ --bg-elevated: var(--surface); /* legacy: eliminar cuando no queden usos */ --bg-card: var(--surface); /* legacy: eliminar cuando no queden usos */ --bg-elevated-2: var(--surface2); /* legacy: eliminar cuando no queden usos */ --bg-input: var(--surface2); /* legacy: eliminar cuando no queden usos */ --text-primary: var(--text); /* legacy: eliminar cuando no queden usos */ --text-secondary: var(--text2); /* legacy: eliminar cuando no queden usos */ --text-muted: var(--text3); /* legacy: eliminar cuando no queden usos */ --border-strong: var(--line2); /* legacy: eliminar cuando no queden usos */ --border-focus: var(--accent); /* legacy: eliminar cuando no queden usos */ --accent-dim: var(--accent-soft); /* legacy: eliminar cuando no queden usos */ --accent-glow: var(--accent-soft); /* legacy: eliminar cuando no queden usos */ --danger: var(--red-tx); /* legacy: eliminar cuando no queden usos (en HTML/JS inline se usa como texto) */ --danger-dim: var(--red-soft); /* legacy: eliminar cuando no queden usos */ --danger-border: var(--red-border); /* legacy: eliminar cuando no queden usos */ --error: var(--red-tx); /* legacy: eliminar cuando no queden usos */ --error-bg: var(--red-soft); /* legacy: eliminar cuando no queden usos */ --error-border: var(--red-border); /* legacy: eliminar cuando no queden usos */ --warning: var(--warn-tx); /* legacy: eliminar cuando no queden usos */ --warning-dim: var(--warn-soft); /* legacy: eliminar cuando no queden usos */ --warning-border: var(--warn-border); /* legacy: eliminar cuando no queden usos */ --info-dim: var(--info-soft); /* legacy: eliminar cuando no queden usos */ --success: var(--ok-tx); /* legacy: eliminar cuando no queden usos */ --success-bg: var(--ok-soft); /* legacy: eliminar cuando no queden usos */ --success-border: var(--ok-border); /* legacy: eliminar cuando no queden usos */ --font-sans: var(--f-body); /* legacy: eliminar cuando no queden usos */ --font-heading: var(--f-display); /* legacy: eliminar cuando no queden usos */ --font-mono: var(--f-body); /* legacy: eliminar cuando no queden usos (cifras alineadas con tabular-nums) */ --radius: var(--r); /* legacy: eliminar cuando no queden usos */ --radius-sm: var(--r-sm); /* legacy: eliminar cuando no queden usos */ --radius-lg: var(--r-lg); /* legacy: eliminar cuando no queden usos */ color-scheme: dark; } [data-theme="light"] { --bg: #E6ECF3; /* modo claro B */ --bg2: #DCE4EF; --surface: #FFFFFF; --surface2: #DCE5F7; --surface3: #C9D6F0; --line: rgba(27,58,140,.12); --line2: #C2CCE0; --line3: rgba(27,58,140,.34); --text: #0F1B35; --text2: #3B4B6E; --text3: #576684; /* >=4,5:1 sobre --bg, --surface y --surface2 */ --accent: #2E5BBA; --accent-tx: #1B3A8C; --ok: #047857; --ok-tx: #027555; --red: #C2410C; --red-tx: #B83B03; --warn: #855E00; --warn-tx: #855E00; --info: #2164B7; --info-tx: #2164B7; --on-red: #FFFFFF; --field-border: #7786A6; /* 3,07:1 sobre --bg y 3,66:1 sobre --surface */ --btn-primary-edge: var(--cobalt); --accent-soft: #DCE5F7; --ok-soft: color-mix(in oklab, #047857 10%, transparent); --red-soft: color-mix(in oklab, #C2410C 9%, transparent); --warn-soft: color-mix(in oklab, #855E00 10%, transparent); --info-soft: color-mix(in oklab, #2164B7 10%, transparent); --accent-hover: color-mix(in oklab, var(--accent-tx) 80%, black); --shadow-lg: 0 12px 40px rgba(15,27,53,.20); color-scheme: light; }