/* ========================== THEME STYLE (EDIT THIS) ========================== */ :root{ /* Brand */ --theme-primary-color: #07080b; --theme-secondary-color: #ffffff; --theme-accent-color: #b79bff; /* Page + surfaces (this creates the "glass" feel) */ --page: #05060a; --page-glow: radial-gradient(1200px 700px at 50% -10%, rgba(183,155,255,.18), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(255,255,255,.06), transparent 60%); --surface: rgba(255,255,255,.055); /* cards/panels */ --surface-2: rgba(255,255,255,.085); /* hover/active */ --surface-3: rgba(255,255,255,.12); /* strong hover / selected */ --border: rgba(255,255,255,.12); --border-2: rgba(255,255,255,.18); /* Text */ --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --muted-2: rgba(255,255,255,.56); /* Accents */ --ring: rgba(183,155,255,.45); /* focus ring */ --accent-soft: rgba(183,155,255,.18); /* chips, subtle highlight */ /* Elevation + shape */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --shadow-sm: 0 10px 30px rgba(0,0,0,.35); --shadow-md: 0 18px 55px rgba(0,0,0,.45); --shadow-lg: 0 26px 90px rgba(0,0,0,.55); /* Blur (optional) */ --glass-blur: 14px; --surface-hover: var(--surface-2); --border-hover: var(--border-2); --shadow-hover: var(--shadow-lg); --lift-hover: -2px; --focus-ring: 0 0 0 3px var(--ring); --panel-strong: rgba(15,18,22,.98); --panel: rgba(15,18,22,.94); /* Form fields (inputs/selects/textarea) */ --field-bg: rgba(255,255,255,.06); --field-bg-focus: rgba(255,255,255,.09); --field-border: rgba(255,255,255,.14); --field-border-focus: rgba(255,255,255,.22); } /* ========================== THEME TEMPLATES (PICK ONE) Usage: ... ========================== */ /* Light Minimal (clean ecommerce / editorial) */ [data-theme="light"]{ --theme-primary-color: #ffffff; --theme-secondary-color: #0c0f14; --theme-accent-color: #6f5cff; --page: #ffffff; --page-glow: radial-gradient(900px 600px at 50% -10%, rgba(111,92,255,.12), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(0,0,0,.04), transparent 60%); --surface: rgba(0,0,0,.035); --surface-2: rgba(0,0,0,.055); --surface-3: rgba(0,0,0,.075); --border: rgba(0,0,0,.10); --border-2: rgba(0,0,0,.14); --text: rgba(10,12,18,.92); --muted: rgba(10,12,18,.68); --muted-2: rgba(10,12,18,.52); --ring: rgba(111,92,255,.40); --accent-soft: rgba(111,92,255,.14); --shadow-sm: 0 10px 26px rgba(0,0,0,.10); --shadow-md: 0 18px 46px rgba(0,0,0,.14); --shadow-lg: 0 26px 80px rgba(0,0,0,.18); } /* Midnight Blue (tech / modern) */ [data-theme="midnight"]{ --theme-primary-color: #050812; --theme-secondary-color: #eaf0ff; --theme-accent-color: #5b5eff; --page: #040611; --page-glow: radial-gradient(1200px 700px at 50% -10%, rgba(91,94,255,.22), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(234,240,255,.06), transparent 60%); --surface: rgba(234,240,255,.055); --surface-2: rgba(234,240,255,.085); --surface-3: rgba(234,240,255,.12); --border: rgba(234,240,255,.14); --border-2: rgba(234,240,255,.20); --text: rgba(234,240,255,.92); --muted: rgba(234,240,255,.72); --muted-2: rgba(234,240,255,.56); --ring: rgba(91,94,255,.48); --accent-soft: rgba(91,94,255,.18); } /* Emerald Luxe (premium / wellness / money vibes) */ [data-theme="emerald"]{ --theme-primary-color: #050b09; --theme-secondary-color: #f3fff9; --theme-accent-color: #2ee59d; --page: #040906; --page-glow: radial-gradient(1200px 700px at 50% -10%, rgba(46,229,157,.18), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(243,255,249,.06), transparent 60%); --surface: rgba(243,255,249,.05); --surface-2: rgba(243,255,249,.08); --surface-3: rgba(243,255,249,.115); --border: rgba(243,255,249,.12); --border-2: rgba(243,255,249,.18); --text: rgba(243,255,249,.92); --muted: rgba(243,255,249,.72); --muted-2: rgba(243,255,249,.56); --ring: rgba(46,229,157,.42); --accent-soft: rgba(46,229,157,.16); } /* Gold Noir (streetwear luxury / “rich” feel) */ [data-theme="gold"]{ --theme-primary-color: #070608; --theme-secondary-color: #fff7e6; --theme-accent-color: #d6b25e; --page: #050409; --page-glow: radial-gradient(1200px 700px at 50% -10%, rgba(214,178,94,.20), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(255,247,230,.06), transparent 60%); --surface: rgba(255,247,230,.045); --surface-2: rgba(255,247,230,.075); --surface-3: rgba(255,247,230,.11); --border: rgba(255,247,230,.12); --border-2: rgba(255,247,230,.18); --text: rgba(255,247,230,.92); --muted: rgba(255,247,230,.72); --muted-2: rgba(255,247,230,.56); --ring: rgba(214,178,94,.45); --accent-soft: rgba(214,178,94,.16); } /* Harvest (cream page + brown surfaces) */ [data-theme="harvest"]{ /* Brand triad */ --theme-primary-color: #f7f1e6; /* cream */ --theme-secondary-color: #2a1b12; /* deep brown text/ink */ --theme-accent-color: #c7772e; /* pumpkin/caramel accent */ /* Canvas */ --page: #f6efdf; --page-glow: radial-gradient(1200px 700px at 50% -10%, rgba(199,119,46,.14), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(42,27,18,.06), transparent 60%); /* Surfaces (cards/panels) — brown “accent” */ --surface: rgba(42,27,18,.86); --surface-2: rgba(42,27,18,.90); --surface-3: rgba(42,27,18,.94); /* Borders */ --border: rgba(42,27,18,.18); --border-2: rgba(42,27,18,.26); /* Text (on cream canvas by default) */ --text: rgba(42,27,18,.92); --muted: rgba(42,27,18,.72); --muted-2: rgba(42,27,18,.56); /* “On surface” text helpers (optional but useful) */ --on-surface: rgba(246,239,223,.92); --on-surface-muted: rgba(246,239,223,.72); /* Focus + accent */ --ring: rgba(199,119,46,.40); --accent-soft: rgba(199,119,46,.18); /* Shadows tuned for light page + dark cards */ --shadow-sm: 0 10px 24px rgba(42,27,18,.14); --shadow-md: 0 18px 44px rgba(42,27,18,.18); --shadow-lg: 0 26px 80px rgba(42,27,18,.22); --surface-hover: var(--surface-2); --border-hover: rgba(42,27,18,.30); --shadow-hover: 0 22px 70px rgba(42,27,18,.22); --lift-hover: -2px; --btn-primary-bg: #c7772e; /* caramel */ --btn-primary-text: rgba(42,27,18,.95); /* brown ink */ --btn-primary-border: rgba(42,27,18,.22); --btn-primary-bg-hover: #d1863a; --btn-primary-shadow: 0 18px 55px rgba(42,27,18,.22); --field-bg: rgba(246,239,223,.07); --field-bg-focus: rgba(246,239,223,.11); --field-border: rgba(246,239,223,.18); --field-border-focus: rgba(246,239,223,.28); } /* Winter Day (snow page + pine/charcoal surfaces) */ [data-theme="winter"]{ /* Brand triad */ --theme-primary-color: #f4f8fb; /* snow */ --theme-secondary-color: #0f1a22; /* ink/pine */ --theme-accent-color: #6fd7ff; /* ice */ /* Canvas */ --page: #f4f8fb; --page-glow: radial-gradient(1200px 700px at 50% -10%, rgba(111,215,255,.22), transparent 55%), radial-gradient(900px 600px at 10% 10%, rgba(15,26,34,.05), transparent 60%); /* Surfaces (cards/panels) */ --surface: rgba(15,26,34,.92); --surface-2: rgba(15,26,34,.95); --surface-3: rgba(15,26,34,.98); --border: rgba(15,26,34,.16); --border-2: rgba(15,26,34,.24); /* Page text (on snow) */ --text: rgba(15,26,34,.92); --muted: rgba(15,26,34,.70); --muted-2: rgba(15,26,34,.55); /* Text on dark surfaces */ --on-surface: rgba(244,248,251,.94); --on-surface-muted: rgba(244,248,251,.72); /* Accents */ --ring: rgba(111,215,255,.45); --accent-soft: rgba(111,215,255,.16); /* Elevation */ --shadow-sm: 0 10px 26px rgba(15,26,34,.14); --shadow-md: 0 18px 52px rgba(15,26,34,.18); --shadow-lg: 0 26px 90px rgba(15,26,34,.22); /* Hover/focus */ --surface-hover: var(--surface-2); --border-hover: rgba(15,26,34,.28); --shadow-hover: var(--shadow-lg); --lift-hover: -2px; /* Primary CTA (checkout) */ --btn-primary-bg-hover: #6fd7ff; --btn-primary-text: rgba(15,26,34,.92); --btn-primary-border: rgba(15,26,34,.20); --btn-primary-bg: #8ae2ff; --btn-primary-shadow: 0 18px 55px rgba(15,26,34,.22); --panel: rgba(15,26,34,.96); --panel-strong: rgba(15,26,34,.99); --field-bg: rgba(244,248,251,.06); --field-bg-focus: rgba(244,248,251,.10); --field-border: rgba(244,248,251,.16); --field-border-focus: rgba(244,248,251,.26); }