/* * variables.css — Design tokens — Cocktail Fest Pro — Light Theme * Brand: #E36D62 corallo + #0069AA blu (cocktailfest.it ufficiali) * Font: Playfair Display + Montserrat (link in ) */ :root { /* === Brand =============================================== */ --c-coral: #e36d62; --c-coral-light: #f08c82; --c-coral-dark: #c4503f; --c-blue: #0069aa; --c-blue-light: #1a7fbf; --c-blue-dark: #004d7a; /* === Sfondi light ======================================== */ --c-bg: #ffffff; --c-bg-soft: #faf9f7; --c-bg-warm: #f5f2ee; --c-surface: #ffffff; --c-card: #ffffff; /* === Bordi =============================================== */ --c-border: #e8e4df; --c-border-soft: #f0ece8; --c-border-coral: rgba(227,109,98,0.25); --c-border-blue: rgba(0,105,170,0.2); /* === Testo =============================================== */ --c-text: #1a1714; --c-text-mid: #4a4440; --c-text-muted: #8a8280; --c-text-faint: #c4c0bc; /* === Feedback ============================================ */ --c-success: #1a7a4a; --c-success-bg: #f0faf4; --c-danger: #c0392b; --c-danger-bg: #fef2f0; /* === Gradienti =========================================== */ --grad-coral: linear-gradient(135deg, var(--c-coral-dark) 0%, var(--c-coral) 60%, var(--c-coral-light) 100%); --grad-hero: linear-gradient(160deg, #fff5f4 0%, #fff 50%, #f0f5ff 100%); /* === Tipografia ========================================== */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --font-script: 'Dancing Script', cursive; /* accenti handwriting */ --fs-2xs: 0.625rem; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base:1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.5rem; --fs-5xl: 3.5rem; /* === Spaziatura ========================================== */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12:3rem; --sp-16: 4rem; /* === Raggi =============================================== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 9999px; /* === Ombre (leggere — light theme) ======================= */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.08); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1); --shadow-lg: 0 8px 32px rgba(0,0,0,0.1); --shadow-coral:0 4px 20px rgba(227,109,98,0.25); /* === Transizioni ========================================= */ --t-fast: 0.15s ease; --t-mid: 0.25s ease; --t-slow: 0.4s cubic-bezier(0.4,0,0.2,1); /* === Icone =============================================== */ --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; /* === Layout ============================================== */ --header-h: 68px; --bottom-bar-h: 66px; --col-cocktails: 320px; --col-ranking: 280px; }