/* * jl-tokens.css — Design system de Averiado: capa unica de tokens. * * Fuente unica de verdad para color de marca, semanticos, tipografia, * radios y sombras. Se carga DESPUES de Bootstrap (para pisar sus --bs-*) * y ANTES de los CSS de pagina (para exponerles los --jl-*). * * Alcance (decision F1, 2026-06-25): esta capa NO reescribe los 75 CSS de * pagina existentes. Define los tokens y puentea los --bs-* clave para que * la marca quede en un solo azul. Los CSS de pagina migraran a var(--jl-*) * uno a uno mas adelante. Ver: * docs/tareas_pendientes_de_hacer/plan_design_system_tokens_2026-06-25.md * * Convencion: prefijo --jl-* (decision G1). Sin estilos inline -> compatible * con la CSP por nonce del proyecto. */ :root { /* ---- Marca (decision A1: #007aff iOS canonico) ---- */ --jl-color-primary: #007aff; --jl-color-primary-rgb: 0, 122, 255; --jl-color-primary-hover: #0062cc; /* darken 10%, ya en uso en el repo */ --jl-color-primary-hover-rgb: 0, 98, 204; /* ---- Semanticos (decision C1: Tailwind 400, ya en uso) ---- */ --jl-color-success: #4ade80; --jl-color-success-rgb: 74, 222, 128; --jl-color-danger: #f87171; --jl-color-danger-rgb: 248, 113, 113; --jl-color-warning: #fbbf24; --jl-color-warning-rgb: 251, 191, 36; --jl-color-info: #60a5fa; --jl-color-info-rgb: 96, 165, 250; /* ---- Tipografia (decision D1) ---- */ --jl-font-sans: "Geist", var(--bs-body-font-family); /* Escala fija de 8 pasos */ --jl-fs-xs: 0.75rem; --jl-fs-sm: 0.875rem; --jl-fs-base: 1rem; --jl-fs-md: 1.125rem; --jl-fs-lg: 1.25rem; --jl-fs-xl: 1.5rem; --jl-fs-2xl: 2rem; --jl-fs-3xl: 2.5rem; /* Pesos disponibles en los woff2 de Geist */ --jl-fw-regular: 400; --jl-fw-medium: 500; --jl-fw-semibold: 600; --jl-fw-bold: 700; /* ---- Radios (decision E1) ---- */ --jl-radius-sm: 0.5rem; --jl-radius-md: 0.75rem; --jl-radius-lg: 1rem; --jl-radius-xl: 1.25rem; --jl-radius-pill: 999px; /* ---- Sombras (decision E1: 3 niveles + glow de marca) ---- */ --jl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); /* nivel base neutro */ --jl-shadow-md: 0 10px 28px rgba(var(--jl-color-primary-rgb), 0.3); /* en uso en el repo */ --jl-shadow-lg: 0 18px 52px rgba(var(--jl-color-primary-rgb), 0.3); /* en uso en el repo */ --jl-glow: 0 0 0 0.2rem rgba(var(--jl-color-primary-rgb), 0.18); /* anillo de foco de marca */ --jl-shadow-card-rest: 0 12px 40px rgba(0, 0, 0, 0.06); /* reposo de card (neutra, light) */ --jl-modal-img-bg: rgba(var(--bs-body-bg-rgb), 0.96); /* fondo translucido del modal de imagen */ --jl-modal-img-blur: blur(10px); /* desenfoque del modal de imagen */ /* ---- Puente a Bootstrap: un solo azul en toda la app ---- */ --bs-primary: var(--jl-color-primary); --bs-primary-rgb: var(--jl-color-primary-rgb); --bs-link-color: var(--jl-color-primary); --bs-link-color-rgb: var(--jl-color-primary-rgb); --bs-link-hover-color: var(--jl-color-primary-hover); --bs-link-hover-color-rgb: var(--jl-color-primary-hover-rgb); /* ---- Interaccion del area privada (E3: hover/accion unificados a marca) ---- */ --jl-interactive-hover: rgba(var(--jl-color-primary-rgb), 0.05); --jl-action-hover-bg: rgba(var(--jl-color-primary-rgb), 0.12); --jl-action-hover-fg: var(--jl-color-primary); } /* * Superficies y neutros por tema (decision B1: escala Apple consolidada). * Bootstrap pone [data-bs-theme="light"] por defecto en . */ [data-bs-theme="light"] { --jl-surface-0: #ffffff; /* fondo base */ --jl-surface-1: #f5f5f7; /* tarjetas / elevado (Apple, en uso) */ --jl-surface-2: #f2f2f7; /* hover / hundido (Apple, en uso) */ --jl-border: var(--bs-border-color); /* borde canonico R1: alias de Bootstrap (D1-b) */ --jl-text: #1d1d1f; /* texto principal (Apple, en uso) */ --jl-text-muted: #6c757d; /* texto secundario (Bootstrap, en uso) */ /* ---- Superficie del area privada (E1) + roles neutros (E2) ---- */ --jl-app-surface: rgba(var(--bs-body-bg-rgb), 0.98); --jl-app-surface-soft: rgba(var(--bs-body-color-rgb), 0.04); --jl-app-border: rgba(var(--bs-body-color-rgb), 0.12); --jl-app-text: var(--bs-body-color); --jl-app-text-muted: rgba(var(--bs-body-color-rgb), 0.5); --jl-app-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06); --jl-divider: rgba(var(--bs-body-color-rgb), 0.08); --jl-action-bg: rgba(var(--bs-body-color-rgb), 0.05); } [data-bs-theme="dark"] { --jl-surface-0: #1d1d1f; /* fondo base (Apple, en uso) */ --jl-surface-1: #2c2c2e; /* tarjetas / elevado (Apple, en uso) */ --jl-surface-2: #3a3a3c; /* mas elevado (Apple systemGray4, completa la escala) */ --jl-border: var(--bs-border-color); /* borde canonico R1: alias de Bootstrap (D1-b), dark #495057 */ --jl-text: #f5f5f7; --jl-text-muted: #adb5bd; /* texto secundario (Bootstrap, en uso) */ /* ---- Superficie del area privada (E1) + roles neutros (E2) ---- */ --jl-app-surface: rgba(20, 30, 52, 0.96); --jl-app-surface-soft: rgba(255, 255, 255, 0.04); --jl-app-border: rgba(255, 255, 255, 0.12); --jl-app-text: rgba(248, 251, 255, 0.88); --jl-app-text-muted: rgba(248, 251, 255, 0.55); --jl-app-shadow: 0 0.5rem 1.5rem rgba(3, 10, 28, 0.4); /* Glow de marca y reposo de card mas intensos en dark (0.45 vs 0.30 light) */ --jl-shadow-md: 0 10px 28px rgba(var(--jl-color-primary-rgb), 0.45); --jl-shadow-lg: 0 18px 52px rgba(var(--jl-color-primary-rgb), 0.45); --jl-shadow-card-rest: 0 12px 40px rgba(0, 0, 0, 0.4); --jl-divider: rgba(255, 255, 255, 0.07); --jl-action-bg: rgba(255, 255, 255, 0.05); } /* * Puente de componentes Bootstrap 5.3: los botones se compilan con el hex * literal del Sass (no leen var(--bs-primary)), asi que para llevar la marca * a un solo azul hay que reasignar sus variables locales aqui. */ .btn-primary { --bs-btn-bg: var(--jl-color-primary); --bs-btn-border-color: var(--jl-color-primary); --bs-btn-hover-bg: var(--jl-color-primary-hover); --bs-btn-hover-border-color: var(--jl-color-primary-hover); --bs-btn-active-bg: var(--jl-color-primary-hover); --bs-btn-active-border-color: var(--jl-color-primary-hover); --bs-btn-disabled-bg: var(--jl-color-primary); --bs-btn-disabled-border-color: var(--jl-color-primary); } .btn-outline-primary { --bs-btn-color: var(--jl-color-primary); --bs-btn-border-color: var(--jl-color-primary); --bs-btn-hover-bg: var(--jl-color-primary); --bs-btn-hover-border-color: var(--jl-color-primary); --bs-btn-active-bg: var(--jl-color-primary); --bs-btn-active-border-color: var(--jl-color-primary); }