/* ============================================================================ * Design Tokens — SMS Masivos * Source of truth: contexto/DESIGN.md (Industrial SaaS Refined) * * Este archivo SOLO define: * - Variables CSS (:root) * - Carga de fuentes (Outfit + Inter + JetBrains Mono) * - Reset tipográfico mínimo (body, h1-h6) heredado vía cascade * - :focus-visible global (a11y) * - text-wrap balance/pretty (R1) * * No estiliza componentes específicos. La regla estricta del plan * (rev 2026-05-06) prohíbe agregar propiedades a selectores que no las * tienen en sus CSS originales — los .redesign.css por vista se * encargan de tokenizar selectores con propiedades existentes. * * Carga: registrado en class.mostrargeneral.php::mostrarCss() vía * in_array para los $varUbicacion del alcance, y referenciable * directamente con /assets/css/design-tokens.css desde cualquier * components// que lo necesite (Patrón B con loadHead). * ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ----- Brand ----- */ --brand-primary: #1AA5FC; --brand-primary-hover: #0C83D0; --brand-primary-light: #47B3FF; --brand-primary-lighter:#75C6FF; --brand-primary-muted: rgba(26, 165, 252, 0.10); --brand-deep: #14477E; --brand-deep-dark: #0D2D50; /* ----- Neutrals (Slate) ----- */ --neutral-900: #0f172a; --neutral-800: #1E293B; --neutral-700: #334155; --neutral-600: #64748b; --neutral-500: #94a3b8; --neutral-400: #cbd5e1; --neutral-300: #E2E8F0; --neutral-200: #F1F5F9; --neutral-100: #F8FAFC; --neutral-white:#FFFFFF; /* ----- Semantic ----- */ --success: #10b981; --success-muted: rgba(16, 185, 129, 0.10); --error: #ef4444; --error-muted: rgba(239, 68, 68, 0.10); --warning: #f59e0b; --warning-muted: rgba(245, 158, 11, 0.10); --info: #3b82f6; --info-muted: rgba(59, 130, 246, 0.10); /* ----- Spacing scale (4px base) ----- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-28: 112px; /* ----- Border radius ----- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ----- Shadows ----- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 14px rgba(26, 165, 252, 0.25); --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.10); --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12); /* ----- Motion ----- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --transition-fast: 150ms var(--ease-out); --transition-base: 200ms var(--ease-out); --transition-slow: 300ms var(--ease-in-out); /* ----- Two-layer semantic tokens (R14) ----- */ --color-text-primary: var(--neutral-800); --color-text-secondary: var(--neutral-600); --color-surface-default: var(--neutral-white); --color-surface-muted: var(--neutral-100); --color-border-default: var(--neutral-300); --color-accent: var(--brand-primary); --color-accent-deep: var(--brand-deep); /* ----- Font sizes (DESIGN.md §Typography Type Scale) — Opción "tokenizar font-sizes" 2026-05-06 ----- */ --font-display: 3.5rem; /* 56px — Hero headlines */ --font-h1: 3rem; /* 48px — Page titles */ --font-h2: 2.25rem; /* 36px — Section titles */ --font-h3: 1.5rem; /* 24px — Sub-sections, card headings */ --font-h4: 1.25rem; /* 20px — Panel titles, modal titles */ --font-body-l: 1.125rem; /* 18px — Marketing body */ --font-body: 1rem; /* 16px — Default body, UI text */ --font-body-s: 0.875rem; /* 14px — Panel body, tables */ --font-caption: 0.75rem; /* 12px — Timestamps, metadata, badges */ /* ----- Font weights (DESIGN.md §Typography Type Scale) — Opción "tokenizar font-weights" 2026-05-06 ----- */ --font-weight-regular: 400; /* Body L / Body / Body S */ --font-weight-medium: 500; /* Caption, data tables */ --font-weight-semibold: 600; /* H3, H4, Badges, button text */ --font-weight-bold: 700; /* H2 headings */ --font-weight-extrabold: 800; /* H1 page titles */ --font-weight-black: 900; /* Display hero headlines */ } /* ----- OpenType ligatures globales (R6) ----- */ html { font-feature-settings: 'liga' 1, 'calt' 1; } /* ----- Tipografía Outfit en headings (Opción 1 aprobada 2026-05-06) ----- * Aplica DESIGN.md §Typography: Outfit para headings. * Sin !important — las font-family específicas (Inter Tight, Lato en email * previews, etc.) se preservan por mayor especificidad. */ h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', system-ui, -apple-system, sans-serif; text-wrap: balance; } p { text-wrap: pretty; } /* ----- Tabular numerics (R6 DESIGN.md §Extended) — Opción 4 aprobada 2026-05-06 * Alinea verticalmente las cifras (todos los dígitos misma anchura). * Aplica a clases helper opt-in + selectores específicos de datos numéricos * comunes en mytool / reports / loyalty. */ .tabular-nums, .stat-number, .cell-date, .preview-current-balance, .content-current-credit, [class*="balance"], [id^="txtTotal"], [id^="lblTotal"], [id^="lblCount"], [id^="lblPlan"], [id*="txt_unique_code"], [id^="txtCode"] { font-variant-numeric: tabular-nums; } /* ----- Uppercase tracking (R10 DESIGN.md §Extended) — Opción 4 aprobada 2026-05-06 * Texto en mayúsculas siempre con letter-spacing ampliado para evitar * "look becario" — convención tipográfica. */ .text-uppercase, .uppercase-label, [class*="uppercase"]:not([class*="text-transform"]) { letter-spacing: 0.05em; } /* ----- Focus visible global (R2) ----- */ *:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* ----- Reduced motion (a11y) ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } }