/* ========================================================================== paletas.css — Design system compartido de la biblioteca de plantillas MySaaSLux (embudo website-vorschau). USO: - Tokens globales (espaciado, radios, sombras, tipografía base) en :root. - 5 paletas de color seleccionables con . - Las plantillas SOLO usan var(--color-*) / var(--space-*) etc. Nunca hex ni px sueltos. Contraste: todos los pares texto/fondo verificados >= AA (4.5:1 cuerpo). Los colores "accent" de bajo contraste (dorado, lima) se usan como superficie o filete decorativo, nunca como texto sobre blanco. ========================================================================== */ :root { /* Tipografía base (cada plantilla define su --font-display propio) */ --font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-display: "DM Sans", system-ui, sans-serif; /* Escala de espaciado (rem) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Radios (cards 12-16px máx, botones/píldoras aparte) */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Sombras (layered, sin "ghost card") */ --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05), 0 2px 6px -2px rgba(20, 20, 30, 0.06); --shadow-md: 0 4px 10px -4px rgba(20, 20, 30, 0.08), 0 14px 34px -12px rgba(20, 20, 30, 0.14); --shadow-lg: 0 8px 20px -8px rgba(20, 20, 30, 0.10), 0 30px 64px -20px rgba(20, 20, 30, 0.20); /* Tinte suave del color de marca (superficie de acento, filetes) */ --color-primary-tint: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); --color-primary-tint-2: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); /* Layout */ --container: 1140px; --container-narrow: 760px; /* Escala z-index semántica */ --z-sticky: 100; --z-overlay: 200; --z-toast: 300; /* Curva de easing (ease-out exponencial) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Fallback de color (si no hay data-paleta = paleta "warm") */ --color-primary: #b5471f; --color-primary-dark: #8a3416; --color-accent: #e0a93b; --color-bg: #fdfbf9; --color-surface: #ffffff; --color-surface-2: #f6efe8; --color-text: #2b2523; --color-text-muted: #6b615c; --color-border: #ebe3dc; --color-on-primary: #ffffff; --color-on-accent: #2b2523; } /* ---------- WARM · terracota / crema (Gastronomie por defecto) ---------- */ [data-paleta="warm"] { --color-primary: #b5471f; --color-primary-dark: #8a3416; --color-accent: #e0a93b; --color-bg: #fdfbf9; --color-surface: #ffffff; --color-surface-2: #f6efe8; --color-text: #2b2523; --color-text-muted: #6b615c; --color-border: #ebe3dc; --color-on-primary: #ffffff; --color-on-accent: #2b2523; } /* ---------- FRESH · verde natural / blanco ---------- */ [data-paleta="fresh"] { --color-primary: #1f7a4d; --color-primary-dark: #155c39; --color-accent: #7fb069; --color-bg: #fcfefd; --color-surface: #ffffff; --color-surface-2: #ecf5ef; --color-text: #1b2620; --color-text-muted: #52655c; --color-border: #dcebe1; --color-on-primary: #ffffff; --color-on-accent: #16241b; } /* ---------- ELEGANT · navy / dorado suave ---------- */ [data-paleta="elegant"] { --color-primary: #1e2a44; --color-primary-dark: #141d30; --color-accent: #c2a468; --color-bg: #fafafb; --color-surface: #ffffff; --color-surface-2: #f0f1f5; --color-text: #1b2233; --color-text-muted: #565f74; --color-border: #e2e5ec; --color-on-primary: #ffffff; --color-on-accent: #1b2233; } /* ---------- MODERN · casi-negro / lima (marca MySaaSLux) ---------- */ [data-paleta="modern"] { --color-primary: #141414; --color-primary-dark: #000000; --color-accent: #c6f135; --color-bg: #ffffff; --color-surface: #f6f7f4; --color-surface-2: #eceee6; --color-text: #141414; --color-text-muted: #565a52; --color-border: #e2e4dc; --color-on-primary: #ffffff; --color-on-accent: #141414; } /* ---------- SOFT · azul pastel ---------- */ [data-paleta="soft"] { --color-primary: #2f6fb0; --color-primary-dark: #22537f; --color-accent: #e8915a; --color-bg: #fbfcfe; --color-surface: #ffffff; --color-surface-2: #eef3f9; --color-text: #1e2733; --color-text-muted: #55616e; --color-border: #e2e8f0; --color-on-primary: #ffffff; --color-on-accent: #ffffff; }