/* ============================================================ RENUCE — DESIGN TOKENS (variables.css) Central source of truth for all design decisions. Every CSS file imports values from here via var(). ============================================================ */ :root { /* ===================================================== BRAND COLORS Primary palette: Deep Black + Warm Gold (luxury) Secondary: Warm neutrals + clean whites ===================================================== */ /* Core Brand */ --color-brand-black: #0A0A0A; /* Primary brand black — logo, headings */ --color-brand-gold: #C9A96E; /* Signature gold accent */ --color-brand-gold-light: #DFC08A; /* Lighter gold — hover states */ --color-brand-gold-dark: #A8844A; /* Darker gold — active states */ --color-brand-white: #FFFFFF; /* Pure white */ --color-brand-cream: #FAF8F5; /* Warm off-white — section bg */ --color-brand-ivory: #F5F0E8; /* Deeper ivory — card bg */ /* ===================================================== NEUTRAL SCALE Used for text, borders, backgrounds, dividers ===================================================== */ --color-gray-50: #FAFAFA; --color-gray-100: #F5F5F5; --color-gray-150: #EFEFEF; --color-gray-200: #E8E8E8; --color-gray-300: #D4D4D4; --color-gray-400: #B0B0B0; --color-gray-500: #8A8A8A; --color-gray-600: #6B6B6B; --color-gray-700: #4A4A4A; --color-gray-800: #2D2D2D; --color-gray-900: #1A1A1A; --color-gray-950: #0D0D0D; /* ===================================================== SEMANTIC COLORS Status indicators, feedback states ===================================================== */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-success-dark: #166534; --color-error: #DC2626; --color-error-light: #FEE2E2; --color-error-dark: #991B1B; --color-warning: #D97706; --color-warning-light: #FEF3C7; --color-warning-dark: #92400E; --color-info: #2563EB; --color-info-light: #DBEAFE; --color-info-dark: #1E40AF; /* ===================================================== WHATSAPP BRAND COLOR ===================================================== */ --color-whatsapp: #25D366; --color-whatsapp-dark: #1EA952; --color-whatsapp-light: #DCF8C6; /* ===================================================== SURFACE COLORS Page backgrounds, card surfaces, overlays ===================================================== */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #FAF8F5; /* Warm cream — section alternates */ --color-bg-tertiary: #F5F0E8; /* Ivory — category cards */ --color-bg-dark: #0A0A0A; /* Black sections */ --color-bg-dark-soft: #111111; /* Slightly lighter dark bg */ --color-bg-overlay: rgba(10, 10, 10, 0.55); /* Hero overlay */ --color-bg-overlay-dark: rgba(10, 10, 10, 0.72); /* Darker overlay */ --color-bg-overlay-warm: rgba(50, 30, 10, 0.55); /* Warm amber overlay */ --color-bg-overlay-light: rgba(255, 255, 255, 0.08); /* Glass effect */ --color-bg-modal: rgba(10, 10, 10, 0.75); /* Modal backdrops */ --color-bg-skeleton: #E8E8E8; /* Loading skeleton base */ --color-bg-skeleton-shine: #F0F0F0; /* Skeleton shimmer */ /* ===================================================== TEXT COLORS ===================================================== */ --color-text-primary: #0A0A0A; /* Main body text */ --color-text-secondary: #4A4A4A; /* Secondary / descriptions */ --color-text-muted: #8A8A8A; /* Captions, hints */ --color-text-disabled: #B0B0B0; /* Disabled state */ --color-text-inverse: #FFFFFF; /* Text on dark backgrounds */ --color-text-inverse-muted: rgba(255,255,255,0.65); /* Muted on dark */ --color-text-gold: #C9A96E; /* Gold accent text */ --color-text-link: #0A0A0A; /* Link default */ --color-text-link-hover: #C9A96E; /* Link hover */ /* ===================================================== BORDER COLORS ===================================================== */ --color-border: #E8E8E8; /* Default border */ --color-border-light: #F0EDED; /* Subtle border */ --color-border-medium: #D4D4D4; /* Medium border */ --color-border-dark: #2D2D2D; /* Dark border */ --color-border-gold: #C9A96E; /* Gold border */ --color-border-focus: #0A0A0A; /* Focus ring */ /* ===================================================== ANNOUNCEMENT BAR ===================================================== */ --announcement-bg: #0A0A0A; --announcement-text: #FFFFFF; --announcement-link: #C9A96E; --announcement-height: 42px; /* ===================================================== TYPOGRAPHY Fonts loaded from Google Fonts in index.html ===================================================== */ /* Font Families */ --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Font Sizes — fluid scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Line Heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.7; --leading-loose: 2; /* Letter Spacing */ --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; --tracking-mega: 0.2em; /* Font Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ===================================================== SPACING SCALE Base-4 system (4px = 1 unit) ===================================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ /* ===================================================== SECTION SPACING Consistent vertical rhythm across pages ===================================================== */ --section-padding-y: 5rem; /* 80px desktop */ --section-padding-y-sm: 3rem; /* 48px mobile */ --section-header-mb: 3rem; /* Below section title */ --section-header-mb-sm: 2rem; /* ===================================================== LAYOUT — CONTAINERS & GRID ===================================================== */ --container-max: 1400px; /* Max site width */ --container-wide: 1280px; /* Wide layout */ --container-normal: 1100px; /* Standard */ --container-narrow: 760px; /* Blog/article */ --container-px: 1.5rem; /* Side padding mobile */ --container-px-md: 2rem; /* Side padding tablet */ --container-px-lg: 3rem; /* Side padding desktop */ --grid-gap: 1.5rem; /* Default grid gap */ --grid-gap-sm: 1rem; --grid-gap-lg: 2rem; /* ===================================================== BORDER RADIUS ===================================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-3xl: 2rem; /* 32px */ --radius-full: 9999px; /* Pill shape */ /* Specific component radius */ --radius-btn: 0.375rem; /* Buttons */ --radius-card: 0.75rem; /* Product cards */ --radius-input: 0.375rem; /* Form inputs */ --radius-badge: 0.25rem; /* Badges/labels */ --radius-modal: 1rem; /* Modal panels */ --radius-tooltip: 0.375rem; /* Tooltips */ /* ===================================================== SHADOWS Layered box-shadow system ===================================================== */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.20); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); --shadow-none: none; /* Colored shadows */ --shadow-gold: 0 8px 24px rgba(201, 169, 110, 0.25); --shadow-gold-sm: 0 4px 12px rgba(201, 169, 110, 0.18); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.04); --shadow-modal: 0 32px 64px rgba(0, 0, 0, 0.20); --shadow-sidebar: -4px 0 32px rgba(0, 0, 0, 0.12); /* ===================================================== TRANSITIONS & ANIMATIONS ===================================================== */ /* Durations */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 350ms; --duration-slower: 500ms; --duration-slowest: 700ms; /* Easing functions */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* Common transition combos */ --transition-base: all var(--duration-base) var(--ease-in-out); --transition-colors: color var(--duration-base) var(--ease-in-out), background-color var(--duration-base) var(--ease-in-out), border-color var(--duration-base) var(--ease-in-out); --transition-transform: transform var(--duration-base) var(--ease-in-out); --transition-opacity: opacity var(--duration-base) var(--ease-in-out); --transition-shadow: box-shadow var(--duration-base) var(--ease-in-out); --transition-fast: all var(--duration-fast) var(--ease-in-out); --transition-slow: all var(--duration-slow) var(--ease-in-out); /* ===================================================== Z-INDEX SCALE Layering system — higher = on top ===================================================== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-sidebar: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; --z-top: 900; --z-max: 9999; /* ===================================================== HEADER ===================================================== */ --header-height: 68px; /* Scrolled/compact */ --header-height-lg: 80px; /* Desktop full */ --header-bg: #FFFFFF; --header-bg-scrolled: rgba(255, 255, 255, 0.97); --header-border: #F0EDED; --header-text: #0A0A0A; --header-link-hover: #C9A96E; --header-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); /* ===================================================== BUTTONS ===================================================== */ /* Primary Button */ --btn-primary-bg: #0A0A0A; --btn-primary-bg-hover: #1A1A1A; --btn-primary-bg-active:#2D2D2D; --btn-primary-text: #FFFFFF; --btn-primary-border: transparent; /* Secondary / Outline Button */ --btn-outline-bg: transparent; --btn-outline-bg-hover: #0A0A0A; --btn-outline-text: #0A0A0A; --btn-outline-text-hover: #FFFFFF; --btn-outline-border: #0A0A0A; /* Ghost Button (on dark backgrounds) */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: rgba(255,255,255,0.12); --btn-ghost-text: #FFFFFF; --btn-ghost-border: rgba(255,255,255,0.55); /* Gold / Accent Button */ --btn-gold-bg: #C9A96E; --btn-gold-bg-hover: #DFC08A; --btn-gold-text: #0A0A0A; --btn-gold-border: transparent; /* WhatsApp Button */ --btn-wa-bg: #25D366; --btn-wa-bg-hover: #1EA952; --btn-wa-text: #FFFFFF; /* Button sizing */ --btn-padding-y-sm: 0.5rem; --btn-padding-x-sm: 1rem; --btn-padding-y-md: 0.7rem; --btn-padding-x-md: 1.5rem; --btn-padding-y-lg: 0.9rem; --btn-padding-x-lg: 2rem; --btn-font-size-sm: var(--text-sm); --btn-font-size-md: var(--text-base); --btn-font-size-lg: var(--text-md); --btn-font-weight: var(--weight-semibold); --btn-letter-spacing: var(--tracking-wide); --btn-radius: var(--radius-btn); /* ===================================================== FORMS & INPUTS ===================================================== */ --input-bg: #FFFFFF; --input-bg-focus: #FFFFFF; --input-border: #D4D4D4; --input-border-hover: #0A0A0A; --input-border-focus: #0A0A0A; --input-border-error: #DC2626; --input-text: #0A0A0A; --input-placeholder: #B0B0B0; --input-label: #4A4A4A; --input-padding-y: 0.65rem; --input-padding-x: 0.875rem; --input-font-size: var(--text-base); --input-radius: var(--radius-input); --input-shadow-focus: 0 0 0 3px rgba(10, 10, 10, 0.10); /* ===================================================== PRODUCT CARDS ===================================================== */ --card-bg: #FFFFFF; --card-border: transparent; --card-border-hover: transparent; --card-radius: var(--radius-card); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); --card-img-ratio: 4 / 5; /* Portrait — fashion standard */ --card-padding: 0.875rem; /* Product badge colors */ --badge-new-bg: #0A0A0A; --badge-new-text: #FFFFFF; --badge-sale-bg: #DC2626; --badge-sale-text: #FFFFFF; --badge-sold-bg: #8A8A8A; --badge-sold-text: #FFFFFF; --badge-featured-bg: #C9A96E; --badge-featured-text: #0A0A0A; /* Star rating */ --color-star: #F59E0B; --color-star-empty: #E8E8E8; /* ===================================================== CART SIDEBAR ===================================================== */ --cart-width: 440px; --cart-width-sm: 100vw; --cart-bg: #FFFFFF; --cart-header-bg: #FFFFFF; --cart-border: #F0EDED; --cart-item-hover: #FAFAFA; /* ===================================================== SEARCH OVERLAY ===================================================== */ --search-overlay-bg: #FFFFFF; --search-input-bg: #F5F5F5; --search-tag-bg: #F5F5F5; --search-tag-bg-hover: #0A0A0A; --search-tag-text: #4A4A4A; --search-tag-text-hover:#FFFFFF; /* ===================================================== ANNOUNCEMENT BAR SPECIFIC ===================================================== */ --announcement-bar-height: 42px; --announcement-bar-bg: #0A0A0A; --announcement-bar-text: rgba(255, 255, 255, 0.90); --announcement-bar-link: #C9A96E; /* ===================================================== HERO SECTION ===================================================== */ --hero-height: 85vh; --hero-height-min: 560px; --hero-height-max: 900px; --hero-dot-size: 8px; --hero-dot-active-w: 28px; --hero-arrow-size: 48px; /* ===================================================== TRUST STRIP ===================================================== */ --trust-strip-bg: #F5F0E8; --trust-strip-border: #EDE8DF; /* ===================================================== NEWSLETTER ===================================================== */ --newsletter-bg: #0A0A0A; --newsletter-text: #FFFFFF; --newsletter-eyebrow: #C9A96E; /* ===================================================== FOOTER ===================================================== */ --footer-bg: #0A0A0A; --footer-text: rgba(255, 255, 255, 0.70); --footer-text-bright: #FFFFFF; --footer-border: rgba(255, 255, 255, 0.10); --footer-link-hover: #C9A96E; --footer-heading: #FFFFFF; /* ===================================================== MEGA MENU ===================================================== */ --mega-menu-bg: #FFFFFF; --mega-menu-shadow: 0 20px 40px rgba(0, 0, 0, 0.10); --mega-menu-border: #F0EDED; /* ===================================================== BREADCRUMBS ===================================================== */ --breadcrumb-text: #8A8A8A; --breadcrumb-active: #0A0A0A; --breadcrumb-divider: #D4D4D4; /* ===================================================== PAGINATION ===================================================== */ --pagination-bg: #FFFFFF; --pagination-bg-hover: #F5F5F5; --pagination-bg-active: #0A0A0A; --pagination-text: #4A4A4A; --pagination-text-active: #FFFFFF; --pagination-border: #E8E8E8; /* ===================================================== TOAST NOTIFICATIONS ===================================================== */ --toast-bg-success: #0A0A0A; --toast-bg-error: #DC2626; --toast-bg-info: #2563EB; --toast-bg-warning: #D97706; --toast-text: #FFFFFF; --toast-radius: 0.5rem; --toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); /* ===================================================== BACK TO TOP ===================================================== */ --back-top-size: 48px; --back-top-bg: #0A0A0A; --back-top-bg-hover: #C9A96E; --back-top-text: #FFFFFF; /* ===================================================== WHATSAPP FLOATING ===================================================== */ --wa-float-size: 60px; --wa-float-bg: #25D366; --wa-float-bg-hover: #1EA952; --wa-float-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); /* ===================================================== SCROLLBAR (webkit) ===================================================== */ --scrollbar-track: #F5F5F5; --scrollbar-thumb: #D4D4D4; --scrollbar-thumb-hover:#8A8A8A; --scrollbar-width: 6px; /* ===================================================== SKELETON LOADER ===================================================== */ --skeleton-bg: #EFEFEF; --skeleton-shine: #F8F8F8; --skeleton-radius: 0.375rem; /* ===================================================== FOCUS / ACCESSIBILITY ===================================================== */ --focus-ring-color: #C9A96E; --focus-ring-offset: 2px; --focus-ring-width: 2px; --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); /* ===================================================== BREAKPOINTS (reference only — use in media queries) --bp-sm: 480px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1280px --bp-2xl: 1400px ===================================================== */ } /* end :root */ /* ============================================================ DARK MODE OVERRIDES System-level dark mode support (future-ready) Currently minimal — brand uses dark header/footer by default ============================================================ */ @media (prefers-color-scheme: dark) { :root { /* Override only page-level surfaces */ /* Header and footer are already dark — no change needed */ /* Cards and main content stay light for fashion product clarity */ /* Uncomment these when/if full dark mode is activated: --color-bg-primary: #111111; --color-bg-secondary: #1A1A1A; --color-bg-tertiary: #222222; --color-text-primary: #F5F5F5; --color-text-secondary: #B0B0B0; --color-border: #2D2D2D; --card-bg: #1A1A1A; --input-bg: #1A1A1A; --input-border: #3D3D3D; --input-text: #F5F5F5; */ } } /* ============================================================ REDUCED MOTION Respects user OS setting for accessibility ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --duration-slowest: 0ms; --transition-base: none; --transition-colors: none; --transition-transform: none; --transition-opacity: none; --transition-shadow: none; --transition-fast: none; --transition-slow: none; } }