/* ============================================================ Design tokens — la unica fuente de verdad de la identidad visual. Cambiar un valor aca se propaga a todo el cotizador. ============================================================ */ :root { /* --- Marca STOPCAR --- */ --brand: #C6002E; --brand-strong: #A30026; --brand-ink: #7A001C; --brand-tint: #FCE9ED; --brand-glow: rgba(198, 0, 46, 0.28); /* --- Neutrales (grises frios) --- */ --bg: #F4F5F8; --surface: #FFFFFF; --surface-2: #FBFBFD; --ink: #15181F; --ink-2: #474E5C; --ink-3: #8B93A3; --line: #E7E9EF; --line-strong: #D3D7E0; /* --- Feedback --- */ --ok: #12805C; --ok-tint: #E7F5EF; --warn: #B7791F; --danger: #C6002E; /* --- Tipografia --- */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: 0.72rem; --fs-sm: 0.84rem; --fs-md: 0.95rem; --fs-lg: 1.1rem; --fs-xl: 1.4rem; --fs-2xl: 1.9rem; --lh-tight: 1.12; --lh: 1.45; /* --- Espaciado (escala compacta) --- */ --sp-1: 0.25rem; --sp-2: 0.45rem; --sp-3: 0.65rem; --sp-4: 0.9rem; --sp-5: 1.2rem; --sp-6: 1.6rem; --sp-7: 2.2rem; --sp-8: 3rem; /* --- Radios --- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* --- Sombras --- */ --shadow-sm: 0 1px 2px rgba(21, 24, 31, 0.06), 0 1px 3px rgba(21, 24, 31, 0.04); --shadow-md: 0 4px 12px rgba(21, 24, 31, 0.08), 0 2px 4px rgba(21, 24, 31, 0.04); --shadow-lg: 0 12px 32px rgba(21, 24, 31, 0.12), 0 4px 8px rgba(21, 24, 31, 0.05); --shadow-brand: 0 10px 28px var(--brand-glow); /* --- Layout --- */ --maxw: 1080px; --header-h: 58px; /* --- Transiciones --- */ --t-fast: 140ms cubic-bezier(0.22, 1, 0.36, 1); --t: 240ms cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ Modo oscuro — el DEFAULT es claro (no sigue al sistema). El oscuro se aplica solo cuando el usuario lo elige con el switch (queda ). Solo se redefinen los colores. ============================================================ */ :root[data-theme="dark"] { --brand: #FF3355; --brand-strong: #FF5470; --brand-ink: #FF98AC; --brand-tint: #3A1620; --brand-glow: rgba(255, 51, 85, 0.32); --bg: #0F141B; --surface: #1D2531; --surface-2: #27303F; --ink: #F1F4F9; --ink-2: #C2CAD8; --ink-3: #8B94A4; --line: #333D4D; --line-strong: #47536B; --ok: #34C08A; --ok-tint: #12271E; --warn: #E0A63A; --danger: #FF4D6A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-brand: 0 10px 28px var(--brand-glow); }