/* ═══════════════════════════════════════════════════════════════ IBRAHIM FASHION — Design Tokens Single source of truth for the entire design system. Change a value here → it updates everywhere. ═══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── 1. SURFACE / BACKGROUNDS ───────────────────────────────────────────────────────────── */ --if-white: #FFFFFF; --if-ivory: #FBF9F5; /* page background alternative */ --if-champagne: #F4EBDC; /* soft warm panel */ --if-linen: #EFE8DA; /* slightly deeper warm panel */ --if-charcoal-bg: #1C1B19; /* dark sections, footer */ /* ───────────────────────────────────────────────────────────── 2. GOLD — use strategically, never flood ───────────────────────────────────────────────────────────── */ --if-gold: #C6A15B; /* primary accent */ --if-gold-soft: #DCC48E; /* hover, light accents */ --if-gold-deep: #A9834A; /* eyebrows, small text accents */ --if-gold-wash: #FAF6EE; /* very subtle tinted background */ /* ───────────────────────────────────────────────────────────── 3. INK / TEXT ───────────────────────────────────────────────────────────── */ --if-charcoal: #1C1B19; /* headings */ --if-ink: #2E2C29; /* strong body text */ --if-body: #4A463F; /* default body text */ --if-muted: #857F74; /* secondary, meta, labels */ --if-faint: #B8B2A7; /* disabled, placeholders */ /* ───────────────────────────────────────────────────────────── 4. BORDERS / DIVIDERS ───────────────────────────────────────────────────────────── */ --if-line: #E7E0D3; /* default border */ --if-line-soft: #F1ECE2; /* very light divider */ --if-line-strong: #D5CCBA; /* emphasized border */ /* ───────────────────────────────────────────────────────────── 5. SEMANTIC COLORS ───────────────────────────────────────────────────────────── */ --if-sale: #9B2C2C; /* sale badge, price drop */ --if-success: #2F6B4F; /* in stock, success message */ --if-warn: #8A6A1F; /* low stock, warning */ --if-error: #9B2C2C; /* validation errors */ --if-info: #3B5C7A; /* informational */ /* ───────────────────────────────────────────────────────────── 6. TYPOGRAPHY — Font families ───────────────────────────────────────────────────────────── */ --if-font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --if-font-body: "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --if-font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; --if-font-mono: "SFMono-Regular", Menlo, Consolas, monospace; /* ───────────────────────────────────────────────────────────── 7. TYPOGRAPHY — Fluid font sizes Each uses clamp(min, fluid, max) for perfect scaling. ───────────────────────────────────────────────────────────── */ --if-fs-display: clamp(2.8rem, 6vw, 5rem); /* huge hero */ --if-fs-h1: clamp(2.2rem, 4.6vw, 3.6rem); --if-fs-h2: clamp(1.75rem, 3.2vw, 2.6rem); --if-fs-h3: clamp(1.3rem, 2.2vw, 1.75rem); --if-fs-h4: clamp(1.1rem, 1.5vw, 1.25rem); --if-fs-h5: 1rem; --if-fs-body: 1rem; --if-fs-body-lg: 1.0625rem; --if-fs-sm: 0.875rem; --if-fs-xs: 0.75rem; --if-fs-xxs: 0.6875rem; /* ───────────────────────────────────────────────────────────── 8. TYPOGRAPHY — Line heights ───────────────────────────────────────────────────────────── */ --if-lh-tight: 1.1; --if-lh-snug: 1.25; --if-lh-normal: 1.5; --if-lh-relaxed: 1.65; --if-lh-loose: 1.8; /* ───────────────────────────────────────────────────────────── 9. TYPOGRAPHY — Letter spacing ───────────────────────────────────────────────────────────── */ --if-track-tight: -0.01em; --if-track-normal: 0; --if-track-wide: 0.08em; --if-track-wider: 0.14em; --if-track-widest: 0.22em; /* logo, eyebrow labels */ /* ───────────────────────────────────────────────────────────── 10. TYPOGRAPHY — Font weights ───────────────────────────────────────────────────────────── */ --if-fw-light: 300; --if-fw-regular: 400; --if-fw-medium: 500; --if-fw-semi: 600; --if-fw-bold: 700; /* ───────────────────────────────────────────────────────────── 11. SPACING — 4px base scale ───────────────────────────────────────────────────────────── */ --if-s1: 4px; --if-s2: 8px; --if-s3: 12px; --if-s4: 16px; --if-s5: 24px; --if-s6: 32px; --if-s7: 48px; --if-s8: 64px; --if-s9: 96px; --if-s10: 128px; --if-s11: 160px; /* ───────────────────────────────────────────────────────────── 12. BORDER RADIUS ───────────────────────────────────────────────────────────── */ --if-r-xs: 1px; --if-r-sm: 2px; --if-r-md: 4px; --if-r-lg: 8px; --if-r-xl: 16px; --if-r-pill: 999px; /* ───────────────────────────────────────────────────────────── 13. SHADOWS — subtle, never heavy ───────────────────────────────────────────────────────────── */ --if-shadow-xs: 0 1px 2px rgba(28, 27, 25, 0.04); --if-shadow-sm: 0 1px 3px rgba(28, 27, 25, 0.06), 0 1px 2px rgba(28, 27, 25, 0.04); --if-shadow-md: 0 4px 16px rgba(28, 27, 25, 0.07), 0 2px 6px rgba(28, 27, 25, 0.04); --if-shadow-lg: 0 12px 40px rgba(28, 27, 25, 0.10), 0 4px 12px rgba(28, 27, 25, 0.05); --if-shadow-xl: 0 24px 60px rgba(28, 27, 25, 0.14); --if-shadow-gold: 0 4px 20px rgba(198, 161, 91, 0.22); /* ───────────────────────────────────────────────────────────── 14. MOTION — easing curves ───────────────────────────────────────────────────────────── */ --if-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* default smooth */ --if-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* fast out */ --if-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric */ --if-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight bounce */ /* ───────────────────────────────────────────────────────────── 15. MOTION — durations ───────────────────────────────────────────────────────────── */ --if-dur-instant: 100ms; --if-dur-fast: 160ms; --if-dur: 280ms; --if-dur-slow: 420ms; --if-dur-slower: 640ms; /* ───────────────────────────────────────────────────────────── 16. LAYOUT ───────────────────────────────────────────────────────────── */ --if-container: 1440px; /* max content width */ --if-container-wide: 1720px; /* for full-bleed sections */ --if-container-narrow: 800px; /* for text-heavy pages */ --if-gutter: clamp(16px, 4vw, 48px); --if-header-h: 72px; --if-header-h-mobile: 60px; --if-announce-h: 38px; /* ───────────────────────────────────────────────────────────── 17. Z-INDEX SCALE — no more z-index: 9999 madness ───────────────────────────────────────────────────────────── */ --if-z-base: 1; --if-z-dropdown: 50; --if-z-sticky: 80; --if-z-header: 100; --if-z-overlay: 900; --if-z-drawer: 1000; --if-z-modal: 1100; --if-z-toast: 1200; --if-z-preloader: 9999; /* ───────────────────────────────────────────────────────────── 18. WOOCOMMERCE-SPECIFIC ───────────────────────────────────────────────────────────── */ --if-price-color: var(--if-charcoal); --if-price-sale-color: var(--if-sale); --if-price-old-color: var(--if-muted); --if-badge-new-bg: var(--if-gold); --if-badge-sale-bg: var(--if-sale); --if-badge-low-bg: var(--if-gold-deep); --if-badge-best-bg: var(--if-charcoal); --if-stock-in-color: var(--if-success); --if-stock-low-color: var(--if-warn); --if-stock-out-color: var(--if-sale); /* ───────────────────────────────────────────────────────────── 19. PRODUCT CARD RATIO Fashion photography works best at 3:4 portrait. Change here → all product cards update. ───────────────────────────────────────────────────────────── */ --if-product-ratio: 3 / 4; --if-hero-ratio: 16 / 9; /* ───────────────────────────────────────────────────────────── 20. FOCUS RING — accessibility ───────────────────────────────────────────────────────────── */ --if-focus-color: var(--if-gold); --if-focus-width: 2px; --if-focus-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ REDUCED MOTION Users who prefer no animation get none. Non-negotiable. ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --if-dur-instant: 0ms; --if-dur-fast: 0ms; --if-dur: 0ms; --if-dur-slow: 0ms; --if-dur-slower: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════ DARK MODE — prepared but not activated. Uncomment :root.dark selectors when needed in future. ═══════════════════════════════════════════════════════════════ :root.dark { --if-white: #14130F; --if-ivory: #1C1B19; --if-charcoal: #F5F2EA; --if-body: #C9C3B8; --if-line: #2E2C29; } */