/* ===================================================== Speedo Coolers — Theme Tokens --------------------------------------------------- Single source of truth for colors, gradients, shadows and geometry. styles.css consumes these via var(--token) only — no hardcoded brand colors should live in styles.css. Default (no attribute) → Consumer theme → Legacy B2B theme ===================================================== */ :root { /* ---- Brand ---- */ --brand-green: #B8D63F; /* logo lime — kept as accent */ --brand-green-dark: #9CB933; /* Primary cool blue — used wherever the old "brand-teal" variable was referenced. Renaming the value, not the variable name, keeps existing selectors working. */ --brand-teal: #2B7A9A; --brand-teal-dark: #1D6F8A; --brand-teal-rgb: 43, 122, 154; --brand-teal-dark-rgb: 29, 111, 138; /* Cool accents (consumer-only) */ --accent-sky: #5BAEC9; --accent-sky-soft: #B4DFEC; --accent-ice: #DFF4FF; --whatsapp: #25D366; --whatsapp-dark: #128C7E; /* ---- Surfaces ---- */ --bg: #FFFFFF; --bg-soft: #F4FBFF; --bg-tint: #EAF7FF; --bg-tint-strong: #DFF4FF; --bg-card: #FFFFFF; --bg-footer: #0F3A4D; /* deep ocean — less industrial */ --bg-footer-soft: #14495F; --border: #DCEAF1; --border-soft: #E9F2F7; /* ---- Type ---- */ --text: #102A36; --text-strong: #0B2230; --muted: #5F7A86; --on-dark: #DCEEF5; /* ---- Gradients ---- */ --gradient-hero: radial-gradient(900px 460px at 100% 0%, rgba(91, 174, 201, .28), transparent 60%), radial-gradient(700px 360px at 0% 100%, rgba(180, 223, 236, .38), transparent 60%), linear-gradient(180deg, #F4FBFF 0%, #EAF7FF 100%); --gradient-page-hero: radial-gradient(900px 440px at 0% 0%, rgba(91, 174, 201, .22), transparent 60%), linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%); --gradient-cta: linear-gradient(135deg, #2B7A9A 0%, #1D6F8A 55%, #14516B 100%); --gradient-announce: linear-gradient(90deg, #1D6F8A 0%, #2B7A9A 55%, #5BAEC9 100%); --gradient-banner-fallback: linear-gradient(160deg, #EAF7FF 0%, #DFF4FF 100%); --gradient-price: linear-gradient(135deg, var(--brand-green) 0%, #DCEC8F 100%); /* ---- Shadows (cool-tinted instead of neutral black) ---- */ --shadow-sm: 0 2px 8px rgba(15, 58, 77, .06); --shadow-md: 0 10px 28px rgba(15, 58, 77, .08); --shadow-lg: 0 18px 44px rgba(15, 58, 77, .12); --shadow-cool: 0 14px 36px rgba(91, 174, 201, .25); /* ---- Geometry ---- */ --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --container: 1200px; --header-h: 68px; --announce-h: 36px; } /* ----- Legacy wholesale theme (opt-in) ------------------ Switch by adding data-theme="wholesale" to . Useful if both versions are ever served from one build. */ [data-theme="wholesale"] { --brand-teal: #2C6E72; --brand-teal-dark: #1F5256; --brand-teal-rgb: 44, 110, 114; --brand-teal-dark-rgb: 31, 82, 86; --accent-sky: #4F8E92; --accent-sky-soft: #B5CCCE; --accent-ice: #E5EAEA; --bg-soft: #F6F8F7; --bg-tint: #EFF3F2; --bg-tint-strong: #E5EAEA; --bg-footer: #1F5256; --bg-footer-soft: #2C6E72; --border: #E5E7EB; --border-soft: #EDEFEF; --text: #1F2937; --text-strong: #111827; --muted: #6B7280; --gradient-hero: radial-gradient(900px 420px at 0% 0%, rgba(44, 110, 114, .06), transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F6F8F7 100%); --gradient-page-hero: radial-gradient(900px 420px at 0% 0%, rgba(44, 110, 114, .07), transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F6F8F7 100%); --gradient-cta: linear-gradient(135deg, #2C6E72 0%, #1F5256 100%); --gradient-announce: linear-gradient(90deg, #2C6E72 0%, #1F5256 100%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06); --shadow-md: 0 8px 24px rgba(0, 0, 0, .08); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .12); --shadow-cool: 0 12px 32px rgba(44, 110, 114, .2); }