/* ============================================================ SOPHOS · Design tokens La "piel" de la marca de Sofía Iriondo. Misma arquitectura que MOLISB (Mónica); aquí solo cambia la personalidad: paleta cálida, tipografía Fraunces + Comfortaa, formas suaves. Fuentes vía Google Fonts (ver en el ): ambas OFL. ============================================================ */ :root { /* ---------- Paleta (brandboard SOPHOS) ---------- */ --c-terracota: #C84417; /* color principal / acentos fuertes */ --c-choco: #643314; /* marrón chocolate — texto */ --c-mantequilla: #FCEB8E; /* amarillo suave — rellenos, píldoras */ --c-crema: #FFF8F2; /* fondo base, "papel" */ --c-dorado: #B8801E; /* mostaza legible — etiquetas / detalle */ --c-oro: #E3A93C; /* dorado vivo — centros de flor */ --c-salvia: #AEB6A2; /* verde salvia neutro — fondos de imagen */ --c-beige: #EDE3D0; /* beige cálido — fondo de renders/bocetos */ --c-verde: #6f7d4e; /* verde oliva (cordel/taking the sun) */ --c-rosa: #C85C8E; /* rosa (stand delfi) — acento puntual */ /* Roles semánticos (usar estos en el resto del CSS) */ --bg: var(--c-crema); --fg: var(--c-choco); --accent: var(--c-terracota); --accent-2: var(--c-dorado); --muted: #9c876f; /* marrón grisáceo suave */ --line: #ecdcc7; /* líneas cálidas finas */ /* Sombra base de marca (chocolate, no negro) */ --shadow-color: 100, 51, 20; /* ---------- Tipografía ---------- */ --font-title: "Fraunces", Georgia, serif; --font-body: "Comfortaa", system-ui, sans-serif; /* Escala tipográfica (fluida) */ --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.95rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); --step-1: clamp(1.3rem, 1.18rem + 0.6vw, 1.65rem); --step-2: clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem); --step-3: clamp(2.35rem, 1.9rem + 2.3vw, 3.9rem); --step-4: clamp(3rem, 2.2rem + 4vw, 6rem); /* ---------- Espaciado / ritmo ---------- */ --space-xs: 0.5rem; --space-s: 1rem; --space-m: 2rem; --space-l: 4rem; --space-xl: 8rem; --container: 1200px; --gutter: clamp(1.2rem, 5vw, 5rem); /* ---------- Otros ---------- */ --radius: 16px; /* formas suaves y amables (friendly) */ --radius-s: 10px; --ease: cubic-bezier(0.22, 1, 0.36, 1); }