/* ================================================================ CENTRALIZED COLOR SYSTEM — Single Source of Truth ================================================================ Every color used in this theme is defined here. All other CSS files MUST reference these tokens via var(). ╔══════════════════════════════════════════════════════════════╗ ║ CANONICAL NAMESPACE: --ds-* ║ ║ Use var(--ds-*) in all NEW code. ║ ║ Legacy --sheeel-* and --sheel-* aliases below (backward ║ ║ compat only — do NOT use in new code). ║ ╚══════════════════════════════════════════════════════════════╝ Dark mode: [data-theme="dark"] on ================================================================ */ :root { /* ====================== BRAND ====================== */ --ds-primary: #4D3F76; /* Deep Aubergine-Plum — logo, headers, accents */ --ds-primary-light: #6B5B96; /* Lighter plum — hover, secondary accent */ --ds-primary-dark: #3a2f59; /* Dark plum — active states, gradients */ --ds-primary-hover: #5a4d85; /* Mid plum — generic hover */ --ds-gold: #C9A96E; /* Gold — CTA buttons (Add to Cart / Checkout) */ --ds-gold-dark: #B8965C; /* Darker gold — hover state */ --ds-coral: #E27B7B; /* Coral — sale tags, wishlist hearts */ --ds-coral-dark: #d06666; /* Darker coral — hover */ /* ====================== BACKGROUNDS ====================== */ --ds-bg: #F8F7FA; /* Page background */ --ds-bg-alt: #f5f5f5; /* Alternate section bg */ --ds-bg-muted: #fafafa; /* Subtle bg — inputs, hover */ --ds-bg-dark: #1A1525; /* Dark bg — footer, dark sections */ --ds-bg-card: #FFFFFF; /* Card / popup surface */ --ds-bg-elevated: #FFFFFF; /* Elevated surface (modals, popups) */ --ds-bg-overlay: rgba(0, 0, 0, 0.50); /* Modal overlay */ --ds-bg-header: rgba(239, 233, 225, 0.92); /* Header/surface warm cream */ /* ====================== TEXT ====================== */ --ds-text: #2A2733; /* Body text — headings, paragraphs */ --ds-text-dark: #333333; /* Darker text (near-black) */ --ds-text-muted: #666666; /* Muted / secondary text */ --ds-text-light: #999999; /* Light / placeholder text */ --ds-text-lighter: #cccccc; /* Very light — disabled */ --ds-text-on-dark: #FFFFFF; /* Text on dark backgrounds (footer) */ --ds-text-on-primary:#FFFFFF; /* Text on primary/gold/colored bg */ --ds-link: #6B5B96; /* Link color */ --ds-link-hover: #4D3F76; /* Link hover */ /* ====================== BORDERS / DIVIDERS ====================== */ --ds-border: #D6D0E8; /* Primary border — lilac tint */ --ds-border-light: #eeeeee; /* Light border — dividers, separators */ --ds-border-input: #e0e0e0; /* Input border */ --ds-border-focus: #4D3F76; /* Focus ring border */ /* ====================== SHADOWS (plum-tinted) ====================== */ --ds-shadow-subtle: rgba(0, 0, 0, 0.03); --ds-shadow-xs: rgba(0, 0, 0, 0.05); --ds-shadow-sm: rgba(77, 63, 118, 0.08); --ds-shadow: rgba(77, 63, 118, 0.10); --ds-shadow-md: rgba(77, 63, 118, 0.15); --ds-shadow-lg: rgba(77, 63, 118, 0.16); --ds-shadow-xl: rgba(77, 63, 118, 0.20); --ds-shadow-2xl: rgba(77, 63, 118, 0.24); --ds-shadow-focus: rgba(77, 63, 118, 0.15); /* ====================== GRADIENTS ====================== */ --ds-gradient-dark: linear-gradient(135deg, #ffffff 0%, #F6F6F8 100%); /* ====================== FEEDBACK / STATUS ====================== */ --ds-success: #1a9e5a; --ds-success-bg: #d4edda; --ds-success-text: #155724; --ds-warning: #f39c12; --ds-warning-bg: #fff3cd; --ds-warning-text: #856404; --ds-danger: #E27B7B; --ds-danger-bg: #f8d7da; --ds-danger-text: #721c24; --ds-info: #3498db; --ds-info-bg: #d1ecf1; --ds-info-text: #0c5460; /* ====================== SOCIAL BRAND COLORS ====================== */ --ds-facebook: #1877F2; --ds-twitter: #1DA1F2; --ds-whatsapp: #25D366; /* ====================== GRAY SCALE ====================== */ --ds-gray-50: #f9f9f9; --ds-gray-100: #f5f5f5; --ds-gray-200: #eeeeee; --ds-gray-300: #dddddd; --ds-gray-400: #cccccc; --ds-gray-500: #999999; --ds-gray-600: #888888; --ds-gray-700: #666666; --ds-gray-800: #444444; --ds-gray-900: #333333; --ds-gray-950: #1a1a1a; /* ====================== SPACING / RADIUS (non-color) ====================== */ --ds-radius-sm: 8px; --ds-radius-md: 12px; --ds-radius-lg: 16px; --ds-radius-xl: 20px; --ds-radius-full: 999px; --ds-transition: all 0.3s ease; /* Legacy non-color tokens */ --sheeel-radius: var(--ds-radius-sm); --sheeel-radius-md: var(--ds-radius-md); --sheeel-radius-lg: var(--ds-radius-lg); --sheel-radius: var(--ds-radius-sm); --sheel-radius-xs: 4px; --sheel-radius-sm: var(--ds-radius-sm); --sheel-radius-md: var(--ds-radius-md); --sheel-radius-lg: var(--ds-radius-lg); --sheel-radius-xl: var(--ds-radius-xl); --sheel-section-y: clamp(36px, 6vw, 72px); --sheel-container: 1200px; --sheel-font-body: 'Cairo', 'Noto Sans Arabic', sans-serif; --sheel-font-heading: 'Cairo', 'Noto Sans Arabic', sans-serif; /* ============================================================ LEGACY ALIASES — backward compatibility [DEPRECATED] ╔══════════════════════════════════════════════════════════╗ ║ DEPRECATED — do NOT use in new code. ║ ║ These map old names to --ds-* for backward compat. ║ ║ Use var(--ds-*) directly instead. ║ ╚══════════════════════════════════════════════════════════╝ ============================================================ */ /* --sheeel-* namespace */ --sheeel-primary: var(--ds-primary); --sheeel-primary-light: var(--ds-primary-light); --sheeel-primary-dark: var(--ds-primary-dark); --sheeel-secondary: var(--ds-primary-light); --sheeel-bg: var(--ds-bg); --sheeel-card: var(--ds-bg-card); --sheeel-card-light: var(--ds-bg-card); --sheeel-charcoal: var(--ds-text); --sheeel-taupe: var(--ds-primary-light); --sheeel-muted: var(--ds-primary-light); --sheeel-border: var(--ds-border); --sheeel-line: var(--ds-border); --sheeel-ink: var(--ds-text); --sheeel-ink-soft: var(--ds-primary-light); --sheeel-accent: var(--ds-primary); --sheeel-success: var(--ds-success); --sheeel-warning: var(--ds-warning); --sheeel-info: var(--ds-info); --sheeel-light: var(--ds-bg); --sheeel-dark: var(--ds-text); --sheeel-gray: var(--ds-gray-500); --sheeel-muted: var(--ds-text-light); --sheeel-border: var(--ds-border); --sheeel-bg: var(--ds-bg); --sheeel-white: var(--ds-bg-card); --sheeel-yellow: var(--ds-gold); --sheeel-gradient: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-dark) 100%); --sheeel-shadow: 0 2px 10px var(--ds-shadow); --sheeel-shadow-lg: 0 8px 30px var(--ds-shadow-md); --sheeel-radius: var(--ds-radius-sm); --sheeel-radius-lg: var(--ds-radius-md); --sheeel-transition: var(--ds-transition); /* --sheel-* namespace */ --sheel-primary: var(--ds-primary); --sheel-primary-dark: var(--ds-primary-dark); --sheel-secondary: var(--ds-primary-light); --sheel-yellow: var(--ds-gold); --sheel-gradient: linear-gradient(135deg, var(--ds-primary) 0%, var(--ds-primary-dark) 100%); --sheel-charcoal: var(--ds-text); --sheel-taupe: var(--ds-primary-light); --sheel-taupe-dark: var(--ds-primary-light); --sheel-beige: var(--ds-bg); --sheel-gray: var(--ds-border); --sheel-cream: var(--ds-bg); --sheel-white: var(--ds-bg-card); --sheel-text: var(--ds-text); --sheel-text-muted: var(--ds-text-muted); --sheel-text-soft: var(--ds-text-light); --sheel-light-text: var(--ds-text-on-primary); --sheel-surface: var(--ds-bg); --sheel-card: var(--ds-bg-card); --sheel-card-light: var(--ds-bg-card); --sheel-border: var(--ds-border); --sheel-shadow: 0 2px 14px var(--ds-shadow); --sheel-shadow-hover: 0 8px 28px var(--ds-shadow-lg); --sheel-glow: 0 0 0 5px rgba(77, 63, 118, 0.15); --sheel-glass: rgba(255, 255, 255, 0.15); --sheel-glass-border: rgba(225, 229, 232, 0.40); --sheel-radius-md: var(--ds-radius-md); --sheel-radius-lg: var(--ds-radius-lg); --sheel-section-y: clamp(36px, 6vw, 72px); --sheel-success: var(--ds-success); --sheel-warning: var(--ds-warning); --sheel-info: var(--ds-info); --sheel-bg: var(--ds-bg); --sheel-light: var(--ds-bg); --sheel-dark: var(--ds-text); --sheel-container: 1200px; --sheel-font-body: 'Cairo', 'Noto Sans Arabic', sans-serif; --sheel-font-heading: 'Cairo', 'Noto Sans Arabic', sans-serif; /* --sheeel-* extra aliases (used by sheel3-header.css) */ --sheeel-primary: var(--ds-primary); --sheeel-primary-dark: var(--ds-primary-dark); --sheeel-secondary: var(--ds-text); --sheeel-bg: var(--ds-bg); --sheeel-border: var(--ds-border-input); --sheeel-white: var(--ds-bg-card); --sheeel-gray: var(--ds-text-light); --sheeel-muted: var(--ds-text-muted); --sheeel-accent: var(--ds-primary-light); --sheeel-shadow: 0 10px 30px rgba(20, 20, 30, 0.08); --sheeel-shadow-lg: 0 10px 40px rgba(20, 20, 30, 0.12); --sheeel-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --sheeel-ink: #1c1c1e; --sheeel-ink-soft: #3a3a3e; --sheeel-line: #ececf0; --sheeel-yellow: #FFF3CD; --sheeel-gradient: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-dark)); --sheeel-card: var(--ds-bg-card); --sheeel-dark: var(--ds-bg-dark); /* --ds-* helpers (already defined above as canonical) */ } /* ================================================================ DARK MODE — [data-theme="dark"] ================================================================ */ [data-theme="dark"] { --ds-primary: #7B6BA8; --ds-primary-light: #9588C0; --ds-primary-dark: #4D3F76; --ds-primary-hover: #8A7AB5; --ds-gold: #D4B87A; --ds-gold-dark: #C9A96E; --ds-coral: #E89494; --ds-coral-dark: #E27B7B; /* Page background goes DARK — but cards/header stay LIGHT */ --ds-bg: #1A1525; --ds-bg-alt: #221D30; --ds-bg-muted: #F0ECF5; --ds-bg-dark: #120E1C; --ds-bg-card: #FFFFFF; --ds-bg-elevated: #FFFFFF; /* Text: dark for light surfaces (header/cards), light for dark surfaces (page) */ --ds-text: #2A2733; --ds-text-dark: #1a1a1a; --ds-text-muted: #6B5B96; --ds-text-light: #999999; --ds-text-lighter: #cccccc; --ds-text-on-dark: #E8E4F0; --ds-text-on-primary:#FFFFFF; --ds-link: #6B5B96; --ds-link-hover: #4D3F76; /* Light borders for light surfaces */ --ds-border: #D6D0E8; --ds-border-light: #eeeeee; --ds-border-input: #e0e0e0; --ds-border-focus: #4D3F76; --ds-shadow-subtle: rgba(0, 0, 0, 0.10); --ds-shadow-xs: rgba(0, 0, 0, 0.12); --ds-shadow-sm: rgba(0, 0, 0, 0.15); --ds-shadow: rgba(0, 0, 0, 0.18); --ds-shadow-md: rgba(0, 0, 0, 0.22); --ds-shadow-lg: rgba(0, 0, 0, 0.28); --ds-shadow-xl: rgba(0, 0, 0, 0.35); --ds-shadow-2xl: rgba(0, 0, 0, 0.40); --ds-shadow-focus: rgba(123, 107, 168, 0.30); --ds-success: #2ecc71; --ds-success-bg: #d4edda; --ds-success-text: #155724; --ds-warning: #f1c40f; --ds-warning-bg: #fff3cd; --ds-warning-text: #856404; --ds-danger: #E89494; --ds-danger-bg: #f8d7da; --ds-danger-text: #721c24; --ds-info: #5dade2; --ds-info-bg: #d1ecf1; --ds-info-text: #0c5460; --ds-gray-50: #f9f9f9; --ds-gray-100: #f5f5f5; --ds-gray-200: #eeeeee; --ds-gray-300: #dddddd; --ds-gray-400: #cccccc; --ds-gray-500: #999999; --ds-gray-600: #888888; --ds-gray-700: #666666; --ds-gray-800: #444444; --ds-gray-900: #333333; --ds-gray-950: #1a1a1a; } /* ================================================================ DARK MODE UTILITY CLASS — toggle without JS ================================================================ */ .dark-toggle { cursor: pointer; user-select: none; }