/* ===================================================================================== THEME - public/theme.css - the ONE file to edit when re-skinning the store. 1. FONTS the Google Fonts link and the three font stacks 2. BRAND PALETTE five colours; every other colour on the site is derived from them 3. SHAPE corner radius for buttons, cards and inputs Component styles never hard-code a colour, font or radius: they only read the variables defined here. This is a plain CSS file, so it takes effect on a browser refresh (no rebuild). The admin area and a few third-party brand colours (WhatsApp green) are the only exceptions. ===================================================================================== */ /* ------------------------------------------------------------------------------------- */ /* 1. FONTS */ /* Display = headings (a high-contrast serif), Script = signature accents, Body = UI text. */ /* Cairo is the Arabic face and replaces all three in right-to-left layouts. */ /* ------------------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&family=Great+Vibes&family=Cairo:wght@300;400;500;600;700&display=swap'); :root { --font-display: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif; --font-script: 'Great Vibes', 'Snell Roundhand', cursive; --font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-rtl: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif; /* Small uppercase labels (nav links, buttons, eyebrows) are letter-spaced like a fashion site */ --tracking-caps: 0.14em; --tracking-caps-sm: 0.08em; /* ----------------------------------------------------------------------------------- */ /* 2. BRAND PALETTE — pink, black and white */ /* ----------------------------------------------------------------------------------- */ --brand-primary: #c93b72; /* rose pink: buttons, links, active states (white text on it passes AA) */ --brand-accent: #f4b6c8; /* blush pink: soft highlights, gradients, footer accents */ --brand-ink: #1b1416; /* warm black: text, top bars, footer */ --brand-blush: #fff6f8; /* barely-there pink: page background and soft panels */ --brand-mauve: #8e4a68; /* dusty plum: script accents, muted pink text */ } /* ---- everything below is derived; edit only if you need to break away from the palette. */ /* Declared on `body` as well as `:root` so the derived shades (hover, light, border, ...) are */ /* recalculated when a preset class or a custom brand colour is applied to . */ :root, body { /* Brand */ --color-primary: var(--brand-primary); --color-primary-hover: color-mix(in srgb, var(--color-primary), black 16%); --color-primary-light: color-mix(in srgb, var(--color-primary), white 91%); /* Text on top of the primary colour; ThemeService recomputes it for custom colours */ --color-on-primary: #ffffff; --color-primary-text: var(--color-on-primary); --color-secondary: var(--brand-mauve); --color-accent: var(--brand-accent); --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary), var(--color-accent) 60%) 100%); /* Footer and other dark surfaces */ --footer-bg: var(--brand-ink); --footer-text: #fff6f8; --footer-muted: color-mix(in srgb, var(--footer-text) 62%, transparent); --footer-accent: var(--color-accent); /* Surfaces */ --color-white: #ffffff; --color-bg: #ffffff; --color-bg-secondary: var(--brand-blush); --color-bg-card: #ffffff; --color-border: color-mix(in srgb, var(--color-primary) 14%, white); --color-text: var(--brand-ink); --color-text-muted: color-mix(in srgb, var(--brand-ink) 58%, white); /* Disabled controls: clearly inert, and never the same as a real button */ --color-disabled-bg: color-mix(in srgb, var(--brand-ink) 8%, white); --color-disabled-text: color-mix(in srgb, var(--brand-ink) 38%, white); /* Status colours (success / error / warning / info / neutral), each with soft bg, text and border */ --color-success: #16a34a; --color-error: #dc2626; --color-warning: #d97706; --color-info: #2563eb; --color-star: #f5a524; --color-success-bg: color-mix(in srgb, var(--color-success) 10%, white); --color-success-fg: color-mix(in srgb, var(--color-success) 62%, black); --color-success-border: color-mix(in srgb, var(--color-success) 28%, white); --color-error-bg: color-mix(in srgb, var(--color-error) 8%, white); --color-error-fg: color-mix(in srgb, var(--color-error) 68%, black); --color-error-border: color-mix(in srgb, var(--color-error) 26%, white); --color-warning-bg: color-mix(in srgb, var(--color-warning) 11%, white); --color-warning-fg: color-mix(in srgb, var(--color-warning) 58%, black); --color-warning-border: color-mix(in srgb, var(--color-warning) 32%, white); --color-info-bg: color-mix(in srgb, var(--color-info) 10%, white); --color-info-fg: color-mix(in srgb, var(--color-info) 68%, black); --color-info-border: color-mix(in srgb, var(--color-info) 28%, white); --color-neutral-bg: color-mix(in srgb, var(--brand-ink) 7%, white); --color-neutral-fg: color-mix(in srgb, var(--brand-ink) 80%, white); /* Brand-tinted badge (e.g. "shipped") */ --color-brand-bg: var(--color-primary-light); --color-brand-fg: color-mix(in srgb, var(--color-primary) 78%, black); --color-violet-bg: #f3e8ff; --color-violet-fg: #6b21a8; /* Overlays and shadows (tinted with the ink colour so they look soft, not grey) */ --color-overlay: color-mix(in srgb, var(--brand-ink) 55%, transparent); --color-glass: color-mix(in srgb, var(--color-bg) 86%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-ink) 7%, transparent); --shadow-md: 0 6px 16px color-mix(in srgb, var(--brand-ink) 8%, transparent); --shadow-lg: 0 20px 44px -14px color-mix(in srgb, var(--brand-ink) 22%, transparent); --shadow-pink: 0 10px 24px -10px color-mix(in srgb, var(--color-primary) 55%, transparent); } :root { /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* Typography scale */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; /* ----------------------------------------------------------------------------------- */ /* 3. SHAPE — crisp fashion-site corners. Raise these for a softer, rounder look. */ /* ----------------------------------------------------------------------------------- */ --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 6px; --radius-full: 9999px; /* pills, avatars, badges */ --radius-btn: 2px; /* every call-to-action button */ --radius-card: 4px; /* product cards, promo tiles, panels */ --radius-panel: 22px; /* soft friendly panels: the review box, coupon cards */ /* Transitions */ --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --navbar-height: 68px; --bottom-tab-height: 60px; --max-width: 1200px; --page-padding: var(--space-lg); } /* Tighter page padding + safe-area support on phones */ @media (max-width: 480px) { :root { --page-padding: max(var(--space-md), env(safe-area-inset-left), env(safe-area-inset-right)); } } /* RTL support: Arabic uses one face for everything */ [dir="rtl"] { --font-family: var(--font-family-rtl); --font-display: var(--font-family-rtl); --font-script: var(--font-family-rtl); --tracking-caps: 0; --tracking-caps-sm: 0; } /* ============================================ */ /* OPTIONAL PRESETS */ /* The default look is the brand palette above (class `theme-brand`, which overrides nothing). */ /* A store owner can still pick one of these in Admin > Settings > Appearance; each swaps the */ /* palette while keeping the fonts and shapes. */ /* Primary colours are all >= 4.5:1 against white so button text stays readable. */ /* ============================================ */ .theme-brand { /* intentionally empty: the :root palette applies */ } .theme-classic { --color-primary: #18181b; --color-accent: #a1a1aa; --color-bg-secondary: #f5f5f6; --color-border: #e4e4e7; --footer-bg: #09090b; --footer-accent: #d4d4d8; } .theme-ocean { --color-primary: #0369a1; --color-accent: #38bdf8; --color-bg-secondary: #f0f7fb; --color-border: #dbe7ef; --footer-bg: #0b2a3d; --footer-accent: #7dd3fc; } .theme-sunset { --color-primary: #c2410c; --color-accent: #f59e0b; --color-bg-secondary: #fbf6f1; --color-border: #efe2d6; --footer-bg: #3b1409; --footer-accent: #fdba74; } .theme-forest { --color-primary: #15803d; --color-accent: #84cc16; --color-bg-secondary: #f2f8f3; --color-border: #dcebdf; --footer-bg: #10261a; --footer-accent: #a3e635; } .theme-royal { --color-primary: #6d28d9; --color-accent: #a78bfa; --color-bg-secondary: #f6f4fc; --color-border: #e5dff5; --footer-bg: #24104f; --footer-accent: #c4b5fd; } .theme-blush { --color-primary: #be185d; --color-accent: #fb7185; --color-bg-secondary: #fdf3f7; --color-border: #f4dde6; --footer-bg: #480a1e; --footer-accent: #fda4af; }