:root { /* Color — paleta propia, nada de crema/terracota ni negro+verde ácido genérico */ --color-ink: #14161F; /* casi negro azulado, texto y fondo destacado */ --color-ink-soft: #565A6B; /* texto secundario, más cálido que un gris plano */ --color-paper: #FAFAF8; /* blanco roto neutro, fondo general */ --color-surface: #FFFFFF; /* superficie de tarjetas, distinta del fondo general */ --color-find: #FF5A36; /* "hallazgo" — reservado a CTA y precio, nunca decorativo */ --color-find-dark: #E6431F; /* estado hover/active del CTA */ --color-mint: #1FAE9F; /* acento secundario, categorías y estados */ --color-mint-dark: #178A7E; /* estado hover del acento secundario */ --color-line: #E7E6E1; /* separadores sutiles */ /* Tipografía — dos familias reales, cargadas vía Google Fonts en el */ --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Escala fluida con clamp() — sin saltos bruscos entre dispositivos */ --step-display: clamp(2rem, 1.3rem + 3vw, 3.5rem); --step-h2: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); --step-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); --step-small: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem); /* Profundidad — sombras suaves y en capas, no un solo drop-shadow genérico */ --shadow-card: 0 1px 2px rgba(20, 22, 31, 0.04), 0 6px 16px rgba(20, 22, 31, 0.06); --shadow-card-hover: 0 4px 8px rgba(20, 22, 31, 0.06), 0 16px 32px rgba(20, 22, 31, 0.12); /* Movimiento — una sola curva consistente en todo el sitio */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --transition-fast: 0.15s var(--ease-standard); --transition-base: 0.25s var(--ease-standard); /* Layout */ --radius-card: 6px; --touch-min: 44px; /* área de toque mínima accesible */ --max-width: 1200px; }