/* Radar Alpha — Theme (mapeo semántico) Fecha: 2026-07-26 | Versión: 1.0.0 | Estado: activo Traduce los tokens crudos (design/tokens/) a variables semánticas que usan los componentes (--bg, --fg, --accent, etc.). Ningún componente debe referenciar un token crudo directamente — siempre pasa por aquí, para que cambiar de tema no requiera tocar componentes. Modo automático por defecto (sigue `prefers-color-scheme` del sistema operativo); `[data-theme="dark"]`/`[data-theme="light"]` en fuerzan una preferencia explícita del usuario (persistida por design/theme/theme.js vía localStorage) y siempre ganan sobre el modo automático. */ :root { --font-body: var(--font-sans); --font-data: var(--font-mono); --duration-fast: var(--duration-fast); --duration-base: var(--duration-base); } /* --- Modo automático: sigue la preferencia del sistema operativo --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--gray-950-dark); --bg-elevated: var(--gray-800-dark); --bg-elevated-hover: var(--gray-700-dark); --border: var(--gray-600-dark); --fg: var(--gray-50-dark); --fg-muted: var(--gray-300-dark); --accent: var(--signal-400); --accent-dim: var(--signal-700); --accent-contrast: var(--gray-950-dark); --danger: var(--danger-400); --warning: var(--warning-400); --info: var(--info-400); --ai: var(--ai-400); --consensus: var(--consensus-400); --shadow-sm: var(--shadow-sm-dark); --shadow-md: var(--shadow-md-dark); --shadow-lg: var(--shadow-lg-dark); } } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: var(--gray-50-light); --bg-elevated: #ffffff; --bg-elevated-hover: var(--gray-100-light); --border: var(--gray-200-light); --fg: var(--gray-950-light); --fg-muted: var(--gray-600-light); --accent: var(--signal-500); --accent-dim: var(--signal-700); --accent-contrast: #ffffff; --danger: var(--danger-500); --warning: var(--warning-500); --info: var(--info-500); --ai: var(--ai-500); --consensus: var(--consensus-500); --shadow-sm: var(--shadow-sm-light); --shadow-md: var(--shadow-md-light); --shadow-lg: var(--shadow-lg-light); } } /* --- Preferencia explícita del usuario (gana siempre) --- */ :root[data-theme="dark"] { --bg: var(--gray-950-dark); --bg-elevated: var(--gray-800-dark); --bg-elevated-hover: var(--gray-700-dark); --border: var(--gray-600-dark); --fg: var(--gray-50-dark); --fg-muted: var(--gray-300-dark); --accent: var(--signal-400); --accent-dim: var(--signal-700); --accent-contrast: var(--gray-950-dark); --danger: var(--danger-400); --warning: var(--warning-400); --info: var(--info-400); --ai: var(--ai-400); --consensus: var(--consensus-400); --shadow-sm: var(--shadow-sm-dark); --shadow-md: var(--shadow-md-dark); --shadow-lg: var(--shadow-lg-dark); } :root[data-theme="light"] { --bg: var(--gray-50-light); --bg-elevated: #ffffff; --bg-elevated-hover: var(--gray-100-light); --border: var(--gray-200-light); --fg: var(--gray-950-light); --fg-muted: var(--gray-600-light); --accent: var(--signal-500); --accent-dim: var(--signal-700); --accent-contrast: #ffffff; --danger: var(--danger-500); --warning: var(--warning-500); --info: var(--info-500); --ai: var(--ai-500); --consensus: var(--consensus-500); --shadow-sm: var(--shadow-sm-light); --shadow-md: var(--shadow-md-light); --shadow-lg: var(--shadow-lg-light); } /* Fallback sin JS/antes de hidratar: oscuro por defecto (identidad "terminal" — ver design/docs/README.md, decisión de producto). */ :root { --bg: var(--gray-950-dark); --bg-elevated: var(--gray-800-dark); --bg-elevated-hover: var(--gray-700-dark); --border: var(--gray-600-dark); --fg: var(--gray-50-dark); --fg-muted: var(--gray-300-dark); --accent: var(--signal-400); --accent-dim: var(--signal-700); --accent-contrast: var(--gray-950-dark); --danger: var(--danger-400); --warning: var(--warning-400); --info: var(--info-400); --ai: var(--ai-400); --consensus: var(--consensus-400); --shadow-sm: var(--shadow-sm-dark); --shadow-md: var(--shadow-md-dark); --shadow-lg: var(--shadow-lg-dark); } body { background: var(--bg); color: var(--fg); transition: background var(--duration-base) var(--ease-standard, ease), color var(--duration-base) var(--ease-standard, ease); }