/* ============================================================ Pikselis — commerce demo shop Brand tokens built ON the Taisyk kit (kit.css / pages.css read --teal* as "primary accent" and --orange* as "action / CTA"). We redefine those two families + neutrals here, then flip them per color-emphasis theme via [data-theme]. ============================================================ */ :root { /* ---------- PIKSELIS PALETTE (raw) ---------- */ --pk-navy: #204282; --pk-navy-deep: #164A92; --pk-navy-text: #243A76; --pk-navy-ink: #0F3171; --pk-teal: #00A79D; --pk-teal-deep: #0A9A92; --pk-seafoam: #5ABBAB; --pk-mint: #80C08A; --pk-mint-soft: #89CCAD; --pk-amber: #F4C082; --pk-blue: #1F88C9; --pk-cyan: #2AACE2; --pk-cyan-deep: #0099CF; --pk-ocean: #0065A9; --pk-cyan-bright: #44D3E2; /* ---------- INK / TEXT (cool, slightly navy) ---------- */ --ink: #14233B; --ink-2: #1B2A40; --fg-1: #46505F; --fg-2: #69727F; --fg-3: #939598; /* gray 500 */ --fg-muted: #A8A9AC; /* gray 400 */ --slate: #4D5460; /* ---------- SURFACES ---------- */ --white: #FFFFFF; --bg: #F9F9F9; /* gray 50 */ --bg-soft: #F3F6F8; --bg-alt: #EEF1F4; /* ---------- LINES ---------- */ --line: #E7EAEE; --line-2: #D2D3D4; /* gray 200 */ --line-3: #EDEFF2; --line-cool: #E8EDF3; /* ---------- STATE ---------- */ --blue: #1F88C9; --blue-tint: #E8F2FA; --success: #1F8A5B; --error: #E5484D; /* ---------- SHADOWS ---------- */ --shadow-card: 0px 6px 26px 0px rgba(28,52,92,0.08); --shadow-pop: 0px 0px 16px 1px rgba(17,24,33,0.07); --shadow-float: 0px 10px 30px 0px rgba(16,33,71,0.22); --shadow-sm: 0px 2px 8px 0px rgba(160,170,185,0.28); /* ---------- RADII ---------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 100px; /* ---------- SPACING ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:104px; /* ---------- TYPE ---------- */ --font: "DM Sans", "Helvetica Neue", Arial, sans-serif; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; /* ---------- HEADER (token-driven so navy theme can go dark) ---------- */ --header-bg: #FFFFFF; --header-fg: var(--ink); --header-dim: var(--fg-2); --header-icon: #1B2A40; --header-line: var(--line-cool); --header-strip: #FFFFFF; /* default theme = TEAL·MINT (also set on via JS) */ } /* ============================================================ THEME: TEAL · MINT (default) primary = teal, action = teal→mint gradient ============================================================ */ :root, [data-theme="teal"] { --teal: #00A79D; /* primary accent */ --teal-deep: #0A9A92; --teal-tint: #E4F6F4; --teal-border: #CFEBE7; --orange: #0A9A92; /* action / sale (kit's CTA family) */ --orange-deep: #057F78; --orange-tint: #E4F6F4; --orange-soft: #80C08A; --sale: #0A9A92; --cta-bg: linear-gradient(92deg, #00A79D 0%, #4FBF9C 55%, #80C08A 100%); --cta-shadow: 0 8px 20px rgba(0,167,157,.28); --hero-grad: linear-gradient(108deg, #E4F6F4 0%, #EAF7EE 46%, #E9F4F7 100%); --hero-ink: var(--ink); --promo-grad: linear-gradient(100deg, #00A79D 0%, #2BB39E 55%, #80C08A 100%); --tile-grad: linear-gradient(150deg, #ECF8F5 0%, #E2F2EE 100%); --tile-glyph: #6FC3B2; --header-bg:#FFFFFF; --header-fg:var(--ink); --header-dim:var(--fg-2); --header-icon:#1B2A40; --header-line:var(--line-cool); --header-strip:#FFFFFF; } /* ============================================================ THEME: NAVY — dark navy header, teal CTA ============================================================ */ [data-theme="navy"] { --teal: #204282; /* primary accent = navy */ --teal-deep: #0F3171; --teal-tint: #EAF0FA; --teal-border: #D7E1F2; --orange: #00A79D; /* action = teal */ --orange-deep: #0A9A92; --orange-tint: #E4F6F4; --orange-soft: #5ABBAB; --sale: #00A79D; --cta-bg: #00A79D; --cta-shadow: 0 8px 20px rgba(0,167,157,.26); --hero-grad: linear-gradient(110deg, #1B3A74 0%, #204282 44%, #0F3171 100%); --hero-ink: #FFFFFF; --promo-grad: linear-gradient(100deg, #204282 0%, #2A56A0 60%, #1F88C9 100%); --tile-grad: linear-gradient(150deg, #EEF2FB 0%, #E4EBF8 100%); --tile-glyph: #7E93C4; --header-bg:#204282; --header-fg:#FFFFFF; --header-dim:rgba(255,255,255,.72); --header-icon:#FFFFFF; --header-line:rgba(255,255,255,.16); --header-strip:#1C3B75; } /* ============================================================ THEME: CYAN — bright cyan / ocean accent ============================================================ */ [data-theme="cyan"] { --teal: #0099CF; /* primary accent = cyan-deep */ --teal-deep: #0065A9; --teal-tint: #E4F4FB; --teal-border: #CBE8F5; --orange: #1F88C9; /* action = blue */ --orange-deep: #0065A9; --orange-tint: #E8F2FA; --orange-soft: #44D3E2; --sale: #0099CF; --cta-bg: linear-gradient(92deg, #0099CF 0%, #2AACE2 60%, #44D3E2 100%); --cta-shadow: 0 8px 20px rgba(0,153,207,.28); --hero-grad: linear-gradient(108deg, #E4F4FB 0%, #E7F1FB 50%, #E9FAFC 100%); --hero-ink: var(--ink); --promo-grad: linear-gradient(100deg, #0065A9 0%, #0099CF 55%, #44D3E2 100%); --tile-grad: linear-gradient(150deg, #ECF7FC 0%, #E0F0Fa 100%); --tile-glyph: #5BB6DC; --header-bg:#FFFFFF; --header-fg:var(--ink); --header-dim:var(--fg-2); --header-icon:#1B2A40; --header-line:var(--line-cool); --header-strip:#FFFFFF; } /* solid-CTA tweak override (forces flat fill in any theme) */ .cta-solid { --cta-bg: var(--orange); --cta-shadow: none; }