/* ═══════════════════════════════════════════════════════════════ * abruma · Design system tokens * Paleta: Espresso · Crema · Coral · Periwinkle (sistema V2) * Hex alineados con app/assets/css/abruma-tokens.css. * ═══════════════════════════════════════════════════════════════ */ :root { /* Backgrounds — alineados con abruma V2 (crema más cálida) */ --color-bg-base: #F7F2E9; /* Canvas (crema-100 abruma) */ --color-bg-surface: #FFFDF8; /* Cards, paneles (crema-0 abruma) */ --color-bg-sunken: #EFE7D8; /* Inputs, tablas (crema-200 abruma) */ --color-bg-dark: #2A2620; /* Sidebar / nav oscuro (bg-sidebar abruma) */ --color-bg-dark-soft: #3A3530; /* Hover sobre fondo oscuro (bg-sidebar-hover abruma) */ /* Text — alineados con abruma V2 (escala espresso) */ --color-text-primary: #322429; /* Espresso 900 abruma */ --color-text-secondary: #8A8275; /* Espresso 400 abruma */ --color-text-tertiary: #B3A99A; /* Espresso 300 abruma */ --color-text-on-dark: #FFFDF8; /* Crema 0 abruma */ --color-text-on-dark-muted: #D6CFC2; /* Espresso 200 abruma */ /* Coral (acento primario · CTA · brand) — coral-600 abruma = CTA sólida */ --color-coral: #F8A494; /* Decorativo (Coral 400) */ --color-coral-deep: #E97560; /* CTA sólida (Coral 600 abruma) */ --color-coral-bg: #FDEEE9; /* Fondos tintados coral (Coral 50) */ --color-coral-border: #F9C9BD; /* Bordes coral (Coral 200) */ /* Blue / Periwinkle (acento secundario · info · links) */ --color-blue: #91ADFF; /* Decorativo (Periwinkle 400) */ --color-blue-deep: #3A4FA0; /* Links activos (Periwinkle 800 abruma) */ --color-blue-bg: #EEF1FF; /* Fondos tintados azul (Periwinkle 50) */ --color-blue-border: #C4CFFF; /* Bordes azul (Periwinkle 200) */ /* Borders */ --color-border-default: #E5DCC8; /* Divisores neutros */ --color-border-strong: #D4C9AF; /* Inputs activos */ /* Estados semánticos — alineados con abruma V2 */ --color-success: #4C5A38; /* Sage 800 abruma */ --color-success-bg: #EDF1E6; /* Sage 50 abruma */ --color-warning: #8A6418; /* Honey 800 abruma */ --color-warning-bg: #FBF1DC; /* Honey 50 abruma */ --color-error: #A03828; /* Mantenemos: brick-800 abruma (#7A2A1F) es demasiado oscuro para errores visibles */ --color-error-bg: #F7E4E0; /* Brick 50 abruma */ --color-info: #3A4FA0; /* Periwinkle 800 abruma */ --color-info-bg: #EEF1FF; /* Periwinkle 50 abruma */ /* ─── Tipografía abruma — UNIFICADA ─── Una sola familia para toda la app. Para cambiarla, edita APP_FONT en app/includes/config.php (controla --font-base + Google Fonts). Si APP_FONT no inyecta --font-base (página sin layout), cae a Outfit. */ --font-body: var(--font-base, 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif); --font-display: var(--font-base, 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif); --font-accent: var(--font-base, 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif); --font-logo: var(--font-base, 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif); --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace; } /* ═══════════════════════════════════════════════════════════════ * Jerarquía tipográfica · abruma · UNIFICADA * Toda la app usa --font-base (controlado por APP_FONT en config.php). * La jerarquía la dan tamaño + peso, no familia. * ═══════════════════════════════════════════════════════════════ */ html, body { font-family: var(--font-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .font-display, .font-bold, .font-extrabold, .font-black, .font-semibold { font-family: var(--font-display); letter-spacing: -0.01em; } h1, h2, h3, h4, h5, h6, .font-bold, .font-extrabold, .font-black, .font-semibold { font-weight: 700; } button, .btn, [role="button"], input[type="submit"], input[type="button"] { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; } .caption, .meta-italic, figcaption { font-family: var(--font-body); font-weight: 300; font-style: italic; color: var(--color-text-tertiary); } .font-accent, .accent-font { font-family: var(--font-accent); font-weight: 500; letter-spacing: -0.005em; } .font-mono, code, kbd, pre, samp, .tabular { font-family: var(--font-mono); } /* ─── Transiciones globales ─── */ * { transition-property: color, background-color, border-color, opacity, box-shadow; transition-duration: 150ms; transition-timing-function: ease-in-out; } /* ─── Base ─── */ html, body { background-color: var(--color-bg-base); color: var(--color-text-primary); } /* ═══════════════════════════════════════════════════════════════ * Sobrescritura de utilidades Tailwind grayscale * Para mantener coherencia sin reescribir cada plantilla. * Cargado DESPUÉS del CDN de Tailwind → gana por orden. * ═══════════════════════════════════════════════════════════════ */ /* ─── Backgrounds ─── */ .bg-white { background-color: var(--color-bg-surface) !important; } .bg-gray-50, .bg-slate-50 { background-color: var(--color-bg-surface) !important; } .bg-gray-100, .bg-slate-100 { background-color: var(--color-bg-sunken) !important; } .bg-gray-200 { background-color: var(--color-border-default) !important; } .bg-gray-300 { background-color: var(--color-border-strong) !important; } .bg-gray-800, .bg-slate-800 { background-color: var(--color-bg-dark-soft) !important; } .bg-gray-900, .bg-slate-900 { background-color: var(--color-bg-dark) !important; } .bg-gray-950, .bg-slate-950 { background-color: var(--color-bg-dark) !important; } .bg-slate-700\/80 { background-color: rgba(68, 54, 55, 0.8) !important; } /* Variantes con opacidad usadas en el código */ .bg-gray-50\/30 { background-color: rgba(251, 247, 236, 0.3) !important; } .bg-gray-50\/40 { background-color: rgba(251, 247, 236, 0.4) !important; } .bg-gray-50\/50 { background-color: rgba(251, 247, 236, 0.5) !important; } .bg-gray-50\/60 { background-color: rgba(251, 247, 236, 0.6) !important; } /* ─── Text ─── */ .text-gray-900, .text-slate-900 { color: var(--color-text-primary) !important; } .text-gray-800, .text-slate-800 { color: var(--color-text-primary) !important; } .text-gray-700, .text-slate-700 { color: var(--color-text-secondary) !important; } .text-gray-600, .text-slate-600 { color: var(--color-text-secondary) !important; } .text-gray-500, .text-slate-500 { color: var(--color-text-tertiary) !important; } .text-gray-400, .text-slate-400 { color: var(--color-text-tertiary) !important; } .text-gray-300, .text-slate-300 { color: var(--color-text-on-dark-muted) !important; } .text-slate-200 { color: var(--color-text-on-dark-muted) !important; } /* ─── Borders ─── */ .border-gray-50, .border-gray-100, .border-slate-200 { border-color: var(--color-border-default) !important; } .border-gray-200 { border-color: var(--color-border-default) !important; } .border-gray-300 { border-color: var(--color-border-strong) !important; } .border-slate-700, .border-slate-800 { border-color: var(--color-bg-dark-soft) !important; } .border-slate-700\/50 { border-color: rgba(255, 253, 243, 0.12) !important; } /* ─── Texto sobre superficies oscuras (sidebar, hero dark, footer) ─── Cuando un text-slate-* / text-gray-* aparece dentro de una superficie bg-slate-900/950 (espresso), debe usar el token "on-dark-muted" para alcanzar contraste AAA. Especificidad doble gana al map base de arriba. */ .bg-slate-900 .text-slate-300, .bg-slate-900 .text-slate-400, .bg-slate-900 .text-slate-500, .bg-slate-950 .text-slate-300, .bg-slate-950 .text-slate-400, .bg-slate-950 .text-slate-500, .bg-gray-900 .text-slate-300, .bg-gray-900 .text-slate-400, .bg-gray-900 .text-slate-500, .bg-gray-950 .text-slate-300, .bg-gray-950 .text-slate-400, .bg-gray-950 .text-slate-500, .bg-slate-900 .text-gray-300, .bg-slate-900 .text-gray-400, .bg-slate-900 .text-gray-500, .bg-slate-950 .text-gray-300, .bg-slate-950 .text-gray-400, .bg-slate-950 .text-gray-500 { color: var(--color-text-on-dark-muted) !important; } /* Hover dentro de sidebar oscuro · refuerza al crema lleno */ .bg-slate-900 .hover\:text-white:hover, .bg-slate-950 .hover\:text-white:hover, .bg-slate-900 .hover\:text-slate-300:hover, .bg-slate-950 .hover\:text-slate-300:hover { color: var(--color-text-on-dark) !important; } /* Fondo hover sutil sobre espresso */ .bg-slate-900 .hover\:bg-slate-800:hover, .bg-slate-950 .hover\:bg-slate-800:hover, .bg-slate-900 .hover\:bg-slate-900:hover, .bg-slate-950 .hover\:bg-slate-900:hover { background-color: var(--color-bg-dark-soft) !important; } /* ═══════════════════════════════════════════════════════════════ * Estados semánticos · sobrescribe las escalas de color Tailwind * estándar (green/red/yellow/blue/orange/purple) para que casen * con la paleta del design system. * ═══════════════════════════════════════════════════════════════ */ /* Success → verde del design system */ .bg-green-50, .bg-emerald-50 { background-color: var(--color-success-bg) !important; } .bg-green-100, .bg-emerald-100 { background-color: var(--color-success-bg) !important; } .text-green-700, .text-green-600, .text-emerald-700, .text-emerald-600 { color: var(--color-success) !important; } .text-green-500, .text-emerald-500 { color: var(--color-success) !important; } .border-green-200, .border-emerald-200 { border-color: var(--color-success) !important; } /* Error → rojo del design system */ .bg-red-50 { background-color: var(--color-error-bg) !important; } .bg-red-100 { background-color: var(--color-error-bg) !important; } .text-red-700, .text-red-600, .text-red-500 { color: var(--color-error) !important; } .border-red-200 { border-color: var(--color-error) !important; } /* Warning → amarillo/ocre del design system */ .bg-yellow-50, .bg-amber-50 { background-color: var(--color-warning-bg) !important; } .bg-yellow-100, .bg-amber-100 { background-color: var(--color-warning-bg) !important; } .text-yellow-700, .text-yellow-600, .text-amber-700, .text-amber-600 { color: var(--color-warning) !important; } .border-yellow-200, .border-amber-200 { border-color: var(--color-warning) !important; } /* Info / azul → blue-deep del design system */ .bg-blue-50 { background-color: var(--color-info-bg) !important; } .bg-blue-100 { background-color: var(--color-info-bg) !important; } .text-blue-700, .text-blue-600, .text-blue-500 { color: var(--color-info) !important; } .border-blue-200 { border-color: var(--color-info) !important; } /* Tonos decorativos secundarios (purple/orange) caen a coral/blue */ .bg-purple-50, .bg-indigo-50 { background-color: var(--color-blue-bg) !important; } .bg-purple-100, .bg-indigo-100 { background-color: var(--color-blue-bg) !important; } .text-purple-700, .text-purple-600, .text-indigo-700, .text-indigo-600 { color: var(--color-blue-deep) !important; } .bg-orange-50 { background-color: var(--color-coral-bg) !important; } .bg-orange-100 { background-color: var(--color-coral-bg) !important; } .text-orange-700, .text-orange-600 { color: var(--color-coral-deep) !important; } /* ═══════════════════════════════════════════════════════════════ * Dark mode (prefers-color-scheme) * Espresso como fondo, crema como texto. * ═══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root { --color-bg-base: #1F1518; /* Dark canvas abruma */ --color-bg-surface: #2A1F23; /* Dark surface abruma */ --color-bg-sunken: #322429; /* Dark surface-alt abruma */ --color-text-primary: #FFFDF8; /* Crema 0 abruma */ --color-text-secondary: #D6CFC2; /* Espresso 200 abruma */ --color-text-tertiary: #B3A99A; /* Espresso 300 abruma */ --color-border-default: #443637; --color-border-strong: #5C4E48; } } /* ═══════════════════════════════════════════════════════════════ * Botones de la app — polish del sistema abruma sobre los CTAs existentes * Solo afecta