/* ============================================================ * uam-tokens.css * Tokens de diseño · Cartas Descriptivas UAM * Para incluir UNA sola vez en el después de Bootstrap 5. * ============================================================ */ :root { /* ── Color · marca ─────────────────────────────────────────── */ --uam-blue: #003f7f; /* Azul institucional UAM */ --uam-blue-700: #002f5f; /* hover sobre azul */ --uam-blue-500: #1f5fa0; --uam-blue-300: #6c92c2; --uam-blue-100: #e6edf5; /* fondo suave azul */ --uam-blue-050: #f4f7fb; --uam-green: #1acc8d; /* Verde menta UAM (éxito / acento) */ --uam-green-700: #12a672; --uam-green-500: #4cd9a4; --uam-green-100: #e3f9f0; --uam-green-050: #f1fcf7; /* ── Color · semánticos ────────────────────────────────────── */ --uam-warn: #ffc107; /* alerta de suplantación */ --uam-warn-100: #fff6da; --uam-danger: #d9534f; --uam-danger-100: #fbe9e9; --uam-info: #0dcaf0; /* ── Color · neutros ───────────────────────────────────────── */ --uam-ink: #1b1f24; /* texto principal de alto contraste (AA) */ --uam-body: #444444; /* texto cuerpo (heredado actual) */ --uam-muted: #6c757d; --uam-line: #e3e5ea; --uam-bg: #ffffff; --uam-bg-soft: #f5f5ff; /* fondo de sección (heredado actual) */ --uam-bg-warm: #fafbfd; /* ── Tipografía ────────────────────────────────────────────── */ --uam-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --uam-font-heading: 'Montserrat', 'Open Sans', system-ui, sans-serif; --uam-font-ui: 'Poppins', 'Open Sans', system-ui, sans-serif; --uam-font-mono: 'JetBrains Mono', 'Courier New', monospace; --uam-fs-xs: 0.75rem; /* 12 */ --uam-fs-sm: 0.875rem; /* 14 */ --uam-fs-md: 1rem; /* 16 */ --uam-fs-lg: 1.125rem; /* 18 */ --uam-fs-xl: 1.375rem; /* 22 */ --uam-fs-2xl: 1.75rem; /* 28 */ --uam-fs-3xl: 2.25rem; /* 36 */ --uam-fs-kpi: 2.5rem; /* 40 — KPI dashboard */ --uam-lh-tight: 1.2; --uam-lh-snug: 1.35; --uam-lh-body: 1.55; /* ── Espaciado (escala de 4) ───────────────────────────────── */ --uam-sp-1: .25rem; --uam-sp-2: .5rem; --uam-sp-3: .75rem; --uam-sp-4: 1rem; --uam-sp-5: 1.5rem; --uam-sp-6: 2rem; --uam-sp-7: 3rem; --uam-sp-8: 4rem; /* ── Radios ────────────────────────────────────────────────── */ --uam-radius-sm: 4px; --uam-radius: 8px; --uam-radius-lg: 12px; --uam-radius-pill: 999px; /* ── Sombras ───────────────────────────────────────────────── */ --uam-shadow-sm: 0 1px 2px rgba(0, 31, 63, .06); --uam-shadow: 0 4px 12px rgba(0, 31, 63, .08); --uam-shadow-lg: 0 12px 32px rgba(0, 31, 63, .12); --uam-shadow-hover: 0 6px 18px rgba(0, 31, 63, .10); /* ── Layout ────────────────────────────────────────────────── */ --uam-sidebar-w: 240px; --uam-sidebar-w-collapsed: 64px; --uam-topbar-h: 56px; /* ── Transiciones ──────────────────────────────────────────── */ --uam-ease: cubic-bezier(.2,.7,.2,1); --uam-dur: 180ms; } /* Mapeo a variables Bootstrap 5 (sobrescribe primary/success/etc.) */ :root { --bs-primary: var(--uam-blue); --bs-primary-rgb: 0, 63, 127; --bs-success: var(--uam-green); --bs-success-rgb: 26, 204, 141; --bs-warning: var(--uam-warn); --bs-danger: var(--uam-danger); --bs-body-color: var(--uam-body); --bs-body-bg: var(--uam-bg); --bs-body-font-family: var(--uam-font-body); --bs-border-color: var(--uam-line); --bs-border-radius: var(--uam-radius); }