/* ════════════════════════════════════════════════ CHAPPSA DESIGN SYSTEM — VARIABLES v2.0 Brandbook oficial + Dark Mode + Impeccable ════════════════════════════════════════════════ */ /* ── LIGHT MODE (default) ── */ :root { /* Paleta Brandbook */ --clr-navy: #1e3653; --clr-yellow: #fcb923; --clr-yellow-dark: #e0a61f; --clr-blue: #479ffa; --clr-white: #ffffff; --clr-gray: #d0d0d3; --clr-gray-light: #ececec; --clr-yellow-light: #ffedb3; --clr-blue-light: #c5ddff; --clr-gray-dark: #313338; /* Semánticos Light */ --clr-bg: #ffffff; --clr-bg-alt: #f7f9fc; --clr-bg-card: #ffffff; --clr-bg-dark: #1e3653; --clr-text: #1e3653; --clr-text-muted: #5a6d82; --clr-border: #e2e8f0; --clr-surface: #f0f4f8; /* Tipografías */ --font-display: 'League Spartan', sans-serif; --font-body: 'Inter', sans-serif; /* Pesos */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Escala tipográfica fluid (clamp) */ --fs-xs: clamp(0.7rem, 1vw, 0.8rem); --fs-sm: clamp(0.85rem, 1.2vw, 0.95rem); --fs-base: clamp(1rem, 1.5vw, 1.1rem); --fs-md: clamp(1.1rem, 1.8vw, 1.25rem); --fs-lg: clamp(1.3rem, 2vw, 1.5rem); --fs-xl: clamp(1.5rem, 3vw, 2rem); --fs-2xl: clamp(2rem, 4vw, 3rem); --fs-3xl: clamp(2.5rem, 5vw, 4rem); --fs-4xl: clamp(3rem, 7vw, 5.5rem); /* Espaciado */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Radios */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 50px; --r-full: 9999px; /* Sombras */ --shadow-sm: 0 2px 8px rgba(30,54,83,0.06); --shadow-md: 0 4px 20px rgba(30,54,83,0.10); --shadow-lg: 0 12px 40px rgba(30,54,83,0.15); --shadow-xl: 0 24px 60px rgba(30,54,83,0.20); --shadow-yellow: 0 8px 30px rgba(252,185,35,0.35); /* Transiciones */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; /* Layout */ --container-max: 1320px; --container-pad: clamp(1.25rem, 5vw, 3rem); --section-py: clamp(4.5rem, 9vw, 8rem); --navbar-h: 72px; /* Z-index */ --z-below: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-whatsapp: 9999; } /* ── DARK MODE — automático (sistema) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --clr-bg: #0d1825; --clr-bg-alt: #111f2e; --clr-bg-card: #162232; --clr-bg-dark: #0a1219; --clr-surface: #1e3653; --clr-text: #dce7f0; --clr-text-muted: #7a9bb8; --clr-border: #253a52; --shadow-sm: 0 2px 8px rgba(0,0,0,0.25); --shadow-md: 0 4px 20px rgba(0,0,0,0.35); --shadow-lg: 0 12px 40px rgba(0,0,0,0.45); --shadow-xl: 0 24px 60px rgba(0,0,0,0.55); } } /* ── DARK MODE manual (clase en ) ── */ [data-theme="dark"] { --clr-bg: #0d1825; --clr-bg-alt: #111f2e; --clr-bg-card: #162232; --clr-bg-dark: #0a1219; --clr-surface: #1e3653; --clr-text: #dce7f0; --clr-text-muted: #7a9bb8; --clr-border: #253a52; --shadow-sm: 0 2px 8px rgba(0,0,0,0.25); --shadow-md: 0 4px 20px rgba(0,0,0,0.35); --shadow-lg: 0 12px 40px rgba(0,0,0,0.45); --shadow-xl: 0 24px 60px rgba(0,0,0,0.55); }