/* ═══════════════════════════════════════════════════════════════════ tokens.css — Sistema de diseño (Sprint D0, Fase 15) ÚNICO lugar donde se definen colores. Ningún otro CSS del proyecto debe contener valores hex sueltos (criterio de cierre de D0). REGLAS SEMÁNTICAS DE COLOR (acordadas en la evaluación 2026-07-12): ─ AZUL (--accent) = color de acción: CTA, estados activos, foco. ─ VERDE (--success) = éxito, confirmación, "procesado en tu equipo". ─ ÁMBAR (--warn) = dependencia externa, límite, best-effort. Nunca solo color: siempre acompañado de icono ▲ o texto. ─ ROJO (--danger) = acciones destructivas/irreversibles y errores. ─ DORADO = RESERVADO para tier premium real. Sin uso hoy. TEMAS: claro por defecto (prototipo del rubro — ver evaluación). theme.js fija data-theme="light|dark" en leyendo la elección guardada o prefers-color-scheme. Sin JS, queda el claro (aceptado). Cuando exista el sistema de cuentas (Punto 0), la preferencia se persiste en la cuenta además de localStorage. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Superficies y texto (tema claro) ── */ --bg: #f5f6f8; /* fondo general de la app */ --surface: #ffffff; /* tarjetas, modales, barras */ --surface-2: #eef0f3; /* superficies secundarias, hover suave */ --border: #e2e5ea; --text: #1a1d21; --text-muted: #5b6472; /* ── Color de acción (azul de marca) ── #1257E2 es el azul oficial de Docta PDF (Activos de marca). */ --accent: #1257E2; --accent-hover: #0e46b8; --accent-soft: #dbeafe; /* fondos suaves de estado activo/info */ --accent-softer: #eff6ff; /* hover de dropzones y similares */ --accent-text: #0e3a99; /* texto informativo sobre --accent-soft */ --accent-contrast: #ffffff; /* ── Semánticos ── */ --success: #16a34a; --success-hover: #15803d; --warn: #d97706; --warn-soft: #fef3c7; --warn-text: #92400e; --danger: #dc2626; --danger-soft: #fee2e2; --danger-text: #991b1b; /* ── Documento (el "papel" del PDF) ── */ --paper: #ffffff; --paper-filter: none; /* en oscuro se atenúa, ver abajo */ /* ── Barra superior del editor ── */ --topbar-bg: #1e3a5f; --topbar-text: #ffffff; --topbar-btn: rgba(255, 255, 255, .12); --topbar-btn-hover: rgba(255, 255, 255, .25); --topbar-separator: rgba(255, 255, 255, .2); --tb-active-bg: #ffffff; --tb-active-text: #1e3a5f; --tb-active-hover: #e2e5ea; /* ── Bloques invertidos (CTA oscura, tooltips) ── */ --invert-bg: #0f172a; --invert-text: #ffffff; --tooltip-bg: rgba(15, 23, 42, .88); --hero-from: #1e3a5f; --hero-to: #2563eb; --hero-surface: #f4f7ff; /* ── No cromáticos ── */ --radius: 10px; --shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .06); --focus-ring: 0 0 0 3px rgba(18, 87, 226, .25); /* ── Movimiento (DOCTA_PDF_PLAN_UX_UI.md §4.5) ── Micro-interacciones + una secuencia orquestada en el hero. Respetadas por prefers-reduced-motion globalmente. */ --t-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-media: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-lenta: 320ms cubic-bezier(0.16, 1, 0.3, 1); --t-sello: 520ms cubic-bezier(0.34, 1.56, 0.64, 1); --tap-target: 44px; /* mínimo táctil (Punto 6) */ /* ── Aliases legacy (nombres usados por CSS previo a D0) ── Mapean la escala de grises antigua a las superficies del tema, así el CSS existente se vuelve theme-aware sin reescribirlo entero. En nuevo código usar los tokens semánticos de arriba. */ --blue: var(--accent); --blue-hover: var(--accent-hover); --green: var(--success); --green-hover: var(--success-hover); --red: var(--danger); --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-500: #5e6e85; --gray-700: #334155; --gray-900: #0f172a; color-scheme: light; } /* ═══ TEMA OSCURO ═══ Superficies elevadas (no negro puro), texto atenuado (no blanco puro) y papel del documento suavizado para evitar el deslumbramiento documento-blanco-sobre-negro (ver evaluación 2026-07-12, área 3.3). */ :root[data-theme="dark"] { --bg: #17181c; --surface: #1e1f24; --surface-2: #26272e; --border: #33353d; --text: #e6e7ea; --text-muted: #9aa1ac; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-soft: #1e2a44; --accent-softer: #1b2333; --accent-text: #93b4f8; /* Patrón dark-mode: botón azul claro con texto oscuro (5.1:1 AA; blanco sobre este azul solo da 3.7:1, válido únicamente para texto grande — verificado numéricamente en el cierre de D0) */ --accent-contrast: #0b1220; --success: #22c55e; --success-hover: #4ade80; --warn: #f59e0b; --warn-soft: #3a2e12; --warn-text: #fcd34d; --danger: #ef4444; --danger-soft: #3d1a1a; --danger-text: #fca5a5; --paper: #ececec; --paper-filter: brightness(.92); --topbar-bg: #1e1f24; --topbar-text: #e6e7ea; --topbar-btn: rgba(255, 255, 255, .08); --topbar-btn-hover: rgba(255, 255, 255, .16); --topbar-separator: rgba(255, 255, 255, .14); --tb-active-bg: #3b82f6; --tb-active-text: #0b1220; --tb-active-hover: #60a5fa; --invert-bg: #111318; --invert-text: #e6e7ea; --tooltip-bg: rgba(38, 39, 46, .95); --hero-from: #111318; --hero-to: #1e3a5f; --hero-surface: #173759; --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .35); --focus-ring: 0 0 0 3px rgba(96, 165, 250, .35); /* Aliases legacy invertidos: la escala clara pasa a oscura para que el CSS previo a D0 (que usa --gray-*) se adapte solo. */ --gray-50: #17181c; --gray-100: #1e1f24; --gray-200: #26272e; --gray-300: #33353d; --gray-500: #9aa1ac; --gray-700: #c4c9d2; --gray-900: #e6e7ea; color-scheme: dark; } /* ── Alternancia global Claro / Oscuro ── */ .appearance-control-host { flex: 0 0 auto; } .appearance-control { display: inline-flex; align-items: center; color: var(--text); } .appearance-control__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; } .appearance-control__toggle:hover { background: var(--surface-2); } .appearance-control__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .appearance-control__icon { display: block; } /* Variante para las barras superiores del editor y la firma. */ .topbar .appearance-control { color: var(--topbar-text); } .topbar .appearance-control__toggle { border-color: var(--topbar-separator); background: var(--topbar-btn); color: var(--topbar-text); } .topbar .appearance-control__toggle:hover { background: var(--topbar-btn-hover); } /* Variante para la página offline, que no utiliza el shell global. */ .appearance-control-host--floating { position: fixed; top: 14px; right: 14px; z-index: 1100; }