/** * PrimeFit — centralized color theme tokens. * Applied via data-theme on , set by the blocking head script + theme.js. * * @package PrimeFit */ :root { color-scheme: dark light; } /* Dark (default + explicit) */ :root, [data-theme="dark"] { /* Global */ --bg: #0d0d0d; --text: #fff; --muted: #8a8a8a; --border: #2a2a2a; --accent: #ff4444; --green: #19ab19; --background: var(--bg); --headerBackground: #131313; --card-background: var(--bg); --white: #ffffff; /* Header */ --chevron-color: #ffffff; /* Product (PDP) */ --product-bg: #0d0d0d; --product-text: #ffffff; --product-border: #262626; --product-muted: #999999; --product-accent: #ff4444; --product-card-bg: #1a1a1a; --product-overlay: rgba(255, 255, 255, 0.1); --product-shadow: rgba(0, 0, 0, 0.3); --nav-svg: #0d0d0d; /* Account */ --account-bg: #0d0d0d; --account-text: #ffffff; --account-text-muted: #cccccc; --account-text-light: #999999; --account-input-bg: #1a1a1a; --account-input-border: #262626; --account-input-focus-border: #ffffff; --account-button-bg: #0d0d0d; --account-button-hover-bg: #333333; --account-button-text: #ffffff; --account-border: #262626; --account-card-bg: #0d0d0d; --account-error-bg: #ff4444; --account-error-text: #ffffff; --account-success-bg: #44ff44; --account-success-text: #0d0d0d; --account-dropdown-bg: #1a1a1a; --account-dropdown-text: #ffffff; --account-dropdown-hover: #333333; --account-dropdown-selected: #444444; --account-nav-bg: #1a1a1a; --account-nav-active-bg: #333333; --account-nav-text: #ffffff; --account-nav-hover-bg: #2a2a2a; /* Checkout */ --checkout-bg: #0d0d0d; --checkout-text: #ffffff; --checkout-text-muted: #cccccc; --checkout-text-light: #999999; --checkout-input-bg: #1a1a1a; --checkout-input-border: #262626; --checkout-input-focus-border: #ffffff; --checkout-button-bg: #0d0d0d; --checkout-button-hover-bg: #333333; --checkout-button-text: #ffffff; --checkout-border: #262626; --checkout-summary-bg: #0d0d0d; --checkout-error-bg: #ff4444; --checkout-error-text: #ffffff; --checkout-success-bg: #44ff44; --checkout-success-text: #0d0d0d; --checkout-dropdown-bg: #1a1a1a; --checkout-dropdown-text: #ffffff; --checkout-dropdown-hover: #333333; --checkout-dropdown-selected: #444444; --checkout-coupon-btn-bg: #ffffff; --checkout-coupon-btn-text: #0d0d0d; --checkout-coupon-btn-hover-bg: #f0f0f0; /* Payment summary */ --payment-summary-bg: #0d0d0d; --payment-summary-text: #ffffff; --payment-summary-text-muted: #cccccc; --payment-summary-text-light: #999999; --payment-summary-card-bg: #0d0d0d; --payment-summary-border: #262626; --payment-summary-success: #44ff44; --payment-summary-warning: #ffaa00; --payment-summary-error: #ff4444; --payment-summary-info: #4a9eff; --payment-summary-shadow: rgba(0, 0, 0, 0.2); } [data-theme="light"] { /* Global */ --bg: #ffffff; --text: #0b0b0b; --muted: #6a6a6a; --border: #e7e7e7; --background: var(--bg); --headerBackground: #fff; --card-background: #f8f8f8; /* Header */ --chevron-color: #0d0d0d; /* Product (PDP) */ --product-bg: #ffffff; --product-text: #0d0d0d; --product-border: #e6e6e6; --product-muted: #666666; --product-accent: #ff4444; --product-card-bg: #f8f8f8; --product-overlay: rgba(0, 0, 0, 0.1); --product-shadow: rgba(0, 0, 0, 0.1); --nav-svg: #0d0d0d; /* Account */ --account-bg: #ffffff; --account-text: #0d0d0d; --account-text-muted: #666666; --account-text-light: #999999; --account-input-bg: #ffffff; --account-input-border: #cccccc; --account-input-focus-border: #0d0d0d; --account-button-bg: #0d0d0d; --account-button-hover-bg: #333333; --account-button-text: #ffffff; --account-border: #cccccc; --account-card-bg: #ffffff; --account-dropdown-bg: #ffffff; --account-dropdown-text: #0d0d0d; --account-dropdown-hover: #f0f0f0; --account-dropdown-selected: #e0e0e0; --account-nav-bg: #f8f8f8; --account-nav-active-bg: #e0e0e0; --account-nav-text: #0d0d0d; --account-nav-hover-bg: #f0f0f0; /* Checkout */ --checkout-bg: #ffffff; --checkout-text: #0d0d0d; --checkout-text-muted: #666666; --checkout-text-light: #999999; --checkout-input-bg: #ffffff; --checkout-input-border: #cccccc; --checkout-input-focus-border: #0d0d0d; --checkout-button-bg: #0d0d0d; --checkout-button-hover-bg: #333333; --checkout-button-text: #ffffff; --checkout-border: #cccccc; --checkout-summary-bg: #ffffff; --checkout-dropdown-bg: #ffffff; --checkout-dropdown-text: #0d0d0d; --checkout-dropdown-hover: #f0f0f0; --checkout-dropdown-selected: #ffffff; --checkout-coupon-btn-bg: #0d0d0d; --checkout-coupon-btn-text: #ffffff; --checkout-coupon-btn-hover-bg: #333333; /* Payment summary */ --payment-summary-bg: #ffffff; --payment-summary-text: #0d0d0d; --payment-summary-text-muted: #666666; --payment-summary-text-light: #999999; --payment-summary-card-bg: #ffffff; --payment-summary-border: #cccccc; --payment-summary-shadow: rgba(0, 0, 0, 0.05); }