/* ========================================================================== tokens.css — Design tokens (CSS custom properties) Two themes share the SAME variable names: :root → Javier Tapia, Contador Auditor (professional, navy) .theme-aloy → Aloy, Impresiones 3D (kawaii / cozy-gaming, pastel) Contrast verified >= 4.5:1 for body text on bg and CTA ink on CTA in both. ========================================================================== */ :root { /* --- Color: professional / default ----------------------------------- */ --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-primary: #0F172A; --color-secondary: #334155; --color-cta: #0369A1; /* #FFFFFF on #0369A1 ≈ 5.7:1 */ --color-cta-ink: #FFFFFF; --color-text: #0F172A; /* #0F172A on #F8FAFC ≈ 16:1 */ --color-muted: #475569; /* #475569 on #F8FAFC ≈ 7.4:1 */ --color-border: #E2E8F0; /* Borde para CONTROLES (inputs). --color-border da 1.23:1 sobre blanco y WCAG 1.4.11 exige 3:1 para los limites de un control. Decorativo != control. */ --color-border-strong: #64748B; --color-accent: #0EA5E9; /* Optional accent slots (only the pro ones used here; aloy adds more) */ --color-accent-2: #38BDF8; --color-accent-sun: #F59E0B; --color-accent-mint: #10B981; /* WhatsApp brand green, darkened for AA (#FFFFFF on it ≈ 5.2:1). Shared by both themes. */ --color-whatsapp: #0A7D54; /* --- Typography ------------------------------------------------------- */ --font-heading: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* Fluid type scale (body never below 16px on mobile) */ --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); --text-xl: clamp(1.35rem, 1.24rem + 0.55vw, 1.6rem); --text-2xl: clamp(1.7rem, 1.5rem + 1vw, 2.2rem); --text-3xl: clamp(2.1rem, 1.8rem + 1.5vw, 2.9rem); --text-hero: clamp(2.5rem, 1.7rem + 4vw, 4.5rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.65; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Radii ------------------------------------------------------------ */ --radius: 0.6rem; --radius-lg: 1.1rem; --radius-pill: 999px; /* --- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 10px 20px rgba(15, 23, 42, 0.10); --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12), 0 20px 48px rgba(15, 23, 42, 0.14); /* --- Spacing scale ---------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; --space-section: clamp(4rem, 3rem + 5vw, 8rem); /* --- Motion ----------------------------------------------------------- */ --dur-fast: 150ms; --dur: 250ms; --dur-slow: 400ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* --- Layout ----------------------------------------------------------- */ --container: 72rem; /* --- Z-index scale ---------------------------------------------------- */ --z-nav: 50; --z-overlay: 80; --z-modal: 90; /* --- Header surface tint (translucent backdrop) ----------------------- */ --header-surface: rgba(255, 255, 255, 0.78); } /* ========================================================================== .theme-aloy — kawaii / cozy-gaming override Same variable names, applied via . ========================================================================== */ .theme-aloy { /* --- Color: pastel kawaii -------------------------------------------- */ --color-bg: #FFF6FB; --color-surface: #FFFFFF; --color-primary: #C2185B; /* deep raspberry — headings/labels/badges. ≈5.5:1 on bg & white; white-on (step badge) ≈5.5:1. Darkened from #FF6FA5 which failed AA. */ --color-secondary: #0E7C5A; /* deep teal — eyebrows/nav/captions. ≈4.9:1 on bg. Darkened from #36C9A6 which failed AA. */ --color-cta: #D6286A; /* #FFFFFF on #D6286A ≈ 4.80:1 (darkened from #E23B73 for AA) */ --color-cta-ink: #FFFFFF; --color-text: #3A2540; /* #3A2540 on #FFF6FB ≈ 11.7:1 */ --color-muted: #7A5C76; /* #7A5C76 on #FFF6FB ≈ 4.9:1 */ --color-border: #FBD5E6; --color-border-strong: #A9678C; /* rosa profundo: 3:1+ sobre blanco para inputs */ --color-pop: #FF6FA5; /* bright candy pink — DECORATIVE ONLY (stickers, dashed borders). Never used for text. */ --color-pop-mint: #36C9A6; /* bright mint — decorative only. */ --color-accent: #8AD0FF; --color-accent-2: #C9B6FF; --color-accent-sun: #FFD45E; --color-accent-mint: #7DE0C9; /* --- Typography ------------------------------------------------------- */ --font-heading: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; /* --- Softer, rounder shapes ------------------------------------------ */ --radius: 1rem; --radius-lg: 1.9rem; /* --- Softer pastel shadows (pink-tinted, diffuse) -------------------- */ --shadow-sm: 0 2px 6px rgba(255, 111, 165, 0.12), 0 1px 3px rgba(201, 182, 255, 0.10); --shadow-md: 0 6px 14px rgba(255, 111, 165, 0.16), 0 12px 28px rgba(138, 208, 255, 0.14); --shadow-lg: 0 14px 30px rgba(255, 111, 165, 0.20), 0 24px 56px rgba(201, 182, 255, 0.18); /* --- Header surface tint (translucent pastel) ------------------------ */ --header-surface: rgba(255, 246, 251, 0.80); }