/* ════════════════════════════════════════════════════════════════════════ EPM — DESIGN TOKENS Cambio OpenSpec: 2026-06-ui-refresh-foundation · ADR-001 ------------------------------------------------------------------------ Theming por variables CSS conmutable en runtime. - DARK = default → `:root` (sin atributo en ) - LIGHT = override → `[data-theme="light"]` El chrome nuevo (sidebar/navbar/bottom-nav) y el login usan var(--token) y heredan el tema activo. El contenido legacy (BS3) conmuta alternando style.css / style.dark.css (ver theme.js). Accent decidido (2026-06-22): rojo Emser #B22130 (light) / #E63946 (dark). ════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────── Fuente — Inter (bundle local, sin CDN). Fallbacks a Roboto/sistema. ────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/fonts/Inter.ttf') format('truetype'); } /* ────────────────────────────────────────────────────────────────────── DARK (default) ────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg-canvas: #0F1620; --bg-surface: #131B27; --bg-elevated: #1A2533; --bg-muted: #1F2A38; --bg-hover: rgba(255, 255, 255, .05); /* Chrome (sidebar + topbar) */ --chrome-sidebar: #0C121B; --chrome-sidebar-hover: rgba(255, 255, 255, .05); --chrome-sidebar-elevated: #131B27; --chrome-topbar: #101622; /* Text */ --text-primary: #F5F5F5; --text-secondary: #C2C9D6; --text-tertiary: #8E95A4; --text-muted: #6B7384; --text-inverse: #15181E; /* Lines */ --border-subtle: rgba(255, 255, 255, .06); --border-default: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .18); --border-focus: #E63946; /* Brand accent (dark: brillante) */ --accent: #E63946; --accent-hover: #F04A57; --accent-soft-bg: rgba(230, 57, 70, .14); --accent-soft-bd: rgba(230, 57, 70, .32); /* States */ --state-danger: #EF4444; --state-danger-bg: rgba(239, 68, 68, .14); --state-danger-bd: rgba(239, 68, 68, .32); --state-warning: #FBBF24; --state-warning-bg: rgba(251, 191, 36, .14); --state-warning-bd: rgba(251, 191, 36, .32); --state-success: #34D399; --state-success-bg: rgba(52, 211, 153, .14); --state-success-bd: rgba(52, 211, 153, .32); --state-info: #3B82F6; --state-info-bg: rgba(59, 130, 246, .14); --state-info-bd: rgba(59, 130, 246, .32); --state-violet: #A78BFA; --state-violet-bg: rgba(167, 139, 250, .14);--state-violet-bd: rgba(167, 139, 250, .32); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 12px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30); /* Misc */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ────────────────────────────────────────────────────────────────────── LIGHT (override) — paleta "Paper Aged" anti-glare, contraste AA Valores adaptados de syngenta sun-mode.css (accent #B22130). ────────────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Surfaces */ --bg-canvas: #EFE9DD; --bg-surface: #FFFFFF; --bg-elevated: #F7F2E7; --bg-muted: #E8E2D3; --bg-hover: #F0E9DA; /* Chrome */ --chrome-sidebar: #E5DCC8; --chrome-sidebar-hover: #D8CFB8; --chrome-sidebar-elevated: #DDD3BC; --chrome-topbar: #FFFFFF; /* Text */ --text-primary: #15181E; /* 14.7:1 on canvas */ --text-secondary: #3A4452; /* 9.9:1 on surface */ --text-tertiary: #5C6473; /* 4.9:1 on canvas — AA (oscurecido de #6B7384 para pasar AA) */ --text-muted: #8E95A4; --text-inverse: #FFFFFF; /* Lines */ --border-subtle: #E0D7C3; --border-default: #C9C0AB; --border-strong: #9F977F; --border-focus: #B22130; /* Brand accent (light: darkened para AA) */ --accent: #B22130; --accent-hover: #931A26; --accent-soft-bg: #FBE9EB; --accent-soft-bd: #E9B7BD; /* States — todos AA sobre canvas/surface */ --state-danger: #B42318; --state-danger-bg: #FBEAE5; --state-danger-bd: #E9B5A8; --state-warning: #92400E; --state-warning-bg: #FCEBC1; --state-warning-bd: #E6C887; --state-success: #15803D; --state-success-bg: #D6F1DD; --state-success-bd: #A0D5AE; --state-info: #1849A9; --state-info-bg: #DCE7F8; --state-info-bd: #A8C0E5; --state-violet: #5B2EAB; --state-violet-bg: #E8DEF8; --state-violet-bd: #C2ABE5; /* Shadows — suaves, borde > sombra bajo sol */ --shadow-sm: 0 1px 2px rgba(20, 24, 31, .06); --shadow-md: 0 4px 12px rgba(20, 24, 31, .08), 0 1px 2px rgba(20, 24, 31, .04); --shadow-lg: 0 8px 24px rgba(20, 24, 31, .10), 0 1px 2px rgba(20, 24, 31, .04); }