/** * Delibreakfast Design System — tokens * Cambiar estética global: editar este archivo (o [data-theme]). */ [data-theme="default"], :root { /* Tipografía */ --font-sans: 'Rubik', system-ui, -apple-system, sans-serif; --font-serif: 'Josefin Sans', var(--font-sans); --font-script: 'Parisienne', cursive; --font-legacy-blog: 'Josefin Sans', var(--font-sans); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.75rem, 4vw, 2.25rem); /* Títulos de categoría y ficha (cestas / productos) — fluido; no reducir en móvil */ --text-catalog-title: clamp(2.25rem, 5vw + 1rem, 3.125rem); --font-weight-catalog-title: 700; --letter-spacing-catalog-title: 0.02em; --line-height-catalog-title: 1.15; --text-hero: clamp(2rem, 5vw, 3rem); --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Color */ --color-brand: #DC3545; --color-brand-hover: #c82333; --color-brand-border-hover: #bd2130; --color-brand-muted: rgba(220, 53, 69, 0.08); --color-text: #222222; --color-text-muted: #757575; --color-surface: #ffffff; --color-border: #ededed; --color-focus-ring: #DC3545; /* Alias legacy (theme2, blogmate, internal) */ --delibreakfast-red: var(--color-brand); --delibreakfast-red-hover: var(--color-brand-hover); --delibreakfast-red-border-hover: var(--color-brand-border-hover); --delibreakfast-btn-radius: var(--radius-btn); /* Espaciado (escala 4px) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --radius-btn: 10px; --radius-sm: 4px; --section-padding-y: 3.75rem; /* Breakpoints (referencia; usar en media queries) */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; /* Layout */ --content-max-width: 72rem; --legal-max-width: 48rem; --touch-target-min: 44px; } /* Tema alternativo (Fase 8): activar con data-theme="seasonal" en */ [data-theme="seasonal"] { --color-brand: #b8860b; --color-brand-hover: #9a7209; --color-brand-border-hover: #7d5e07; --color-brand-muted: rgba(184, 134, 11, 0.1); --delibreakfast-red: var(--color-brand); --delibreakfast-red-hover: var(--color-brand-hover); --delibreakfast-red-border-hover: var(--color-brand-border-hover); }