/* ========================================================= NEW ASTROLOGY — Theme tokens --------------------------------------------------------- Edit ONLY this file to recolor the entire site. All custom components in site.css and every page reference these variables. Bootstrap utility classes that use --bs-* are also rebound below so .bg-primary, .btn-primary, etc. pick up the brand color automatically. ========================================================= */ :root { /* ----- Brand: PRIMARY (Saffron palette — deep maroon) ------- */ --brand-primary: #7a1c1c; --brand-primary-700: #a02828; --brand-primary-900: #4a0e0e; --brand-primary-rgb: 122, 28, 28; /* ----- Brand: ACCENT (Saffron palette — saffron / gold) ----- */ --brand-accent: #e8a23a; --brand-accent-300: #fcd47e; --brand-accent-700: #b7741b; --brand-accent-rgb: 232, 162, 58; /* ----- Brand: SECONDARY (warm terracotta) ------------ */ --brand-secondary: #c44612; --brand-secondary-300: #d97757; --brand-secondary-700: #7a2010; /* ----- Neutrals -------------------------------------- */ --brand-cream: #fff6e2; --brand-cream-2: #fbe7be; --brand-cream-3: #e6d3a8; --brand-ink: #1a0a0a; --brand-muted: #6b6452; --brand-border: rgba(232, 162, 58, 0.28); --brand-paper: #ffffff; /* ----- Status / utility ------------------------------ */ --brand-whatsapp: #25d366; --brand-success: #2f8a52; --brand-danger: #c0392b; /* ----- Typography ------------------------------------ */ --font-display: 'Cinzel', 'Times New Roman', serif; --font-script: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mystic: 'Yatra One', 'Cinzel', serif; --fs-display-1: clamp(2.25rem, 4vw + 1rem, 4rem); --fs-display-2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); --fs-display-3: clamp(1.4rem, 1.6vw + 1rem, 2rem); /* ----- Layout / shape -------------------------------- */ --section-pad-y: clamp(3.5rem, 6vw, 6rem); --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-pill: 999px; --shadow-sm: 0 4px 14px rgba(13, 27, 62, 0.08); --shadow-md: 0 14px 30px rgba(13, 27, 62, 0.12); --shadow-lg: 0 28px 60px rgba(13, 27, 62, 0.18); --shadow-gold: 0 10px 26px rgba(183, 116, 27, 0.30); /* ----- Bootstrap variable overrides ------------------ */ --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); --bs-secondary: var(--brand-accent); --bs-secondary-rgb: var(--brand-accent-rgb); --bs-body-font-family: var(--font-body); --bs-body-color: var(--brand-ink); --bs-body-bg: var(--brand-cream); --bs-link-color: var(--brand-primary); --bs-link-hover-color: var(--brand-accent-700); --bs-border-color: var(--brand-border); --bs-border-radius: var(--radius-md); --bs-border-radius-lg: var(--radius-lg); } /* ---------- Optional alternate palettes ---------- Apply one of these on or to swap themes: midnight + violet + silver cream + saffron + maroon (classic Indian) ivory + rose + deep teal golden yellow + vivid red (solar / festive) deep navy + crimson red --------------------------------------------------- */ body.theme-night { --brand-primary: #160b35; --brand-primary-700: #2a1857; --brand-primary-900: #080418; --brand-primary-rgb: 22, 11, 53; --brand-accent: #c0a3ff; --brand-accent-300: #e2d3ff; --brand-accent-700: #8964e0; --brand-accent-rgb: 192, 163, 255; --brand-secondary: #8e3acb; --brand-cream: #f4f0fb; --brand-cream-2: #e6dbf7; --bs-primary-rgb: 22, 11, 53; --bs-secondary-rgb: 192, 163, 255; } body.theme-saffron { --brand-primary: #7a1c1c; --brand-primary-700: #a02828; --brand-primary-900: #4a0e0e; --brand-primary-rgb: 122, 28, 28; --brand-accent: #e8a23a; --brand-accent-300: #fcd47e; --brand-accent-700: #b7741b; --brand-accent-rgb: 232, 162, 58; --brand-secondary: #c44612; --brand-cream: #fff6e2; --brand-cream-2: #fbe7be; --bs-primary-rgb: 122, 28, 28; --bs-secondary-rgb: 232, 162, 58; } body.theme-solar { --brand-primary: #c8000a; /* vivid red */ --brand-primary-700: #a30008; --brand-primary-900: #6b0005; --brand-primary-rgb: 200, 0, 10; --brand-accent: #ffd400; /* golden yellow */ --brand-accent-300: #ffe76b; --brand-accent-700: #c9a800; --brand-accent-rgb: 255, 212, 0; --brand-secondary: #e03a00; /* orange-red */ --brand-secondary-300: #ff6a35; --brand-secondary-700: #9e2900; --brand-cream: #fffbea; /* warm yellow-white */ --brand-cream-2: #fff2c0; --brand-cream-3: #ffe98a; --brand-ink: #1a0505; --brand-muted: #7a5a40; --brand-border: rgba(255, 212, 0, 0.35); --shadow-gold: 0 10px 26px rgba(200, 0, 10, 0.25); --bs-primary-rgb: 200, 0, 10; --bs-secondary-rgb: 255, 212, 0; --bs-body-bg: var(--brand-cream); --bs-link-color: var(--brand-primary); --bs-link-hover-color: var(--brand-accent-700); } body.theme-crimson { --brand-primary: #0a1f5c; /* deep navy */ --brand-primary-700: #162a7a; --brand-primary-900: #050f30; --brand-primary-rgb: 10, 31, 92; --brand-accent: #d10021; /* crimson red */ --brand-accent-300: #ff3355; --brand-accent-700: #a00018; --brand-accent-rgb: 209, 0, 33; --brand-secondary: #b8001d; --brand-secondary-300: #e84060; --brand-secondary-700: #7a0012; --brand-cream: #f0f2fa; /* cool white */ --brand-cream-2: #dde2f4; --brand-cream-3: #c8d0ed; --brand-ink: #05091a; --brand-muted: #5a6080; --brand-border: rgba(209, 0, 33, 0.22); --shadow-gold: 0 10px 26px rgba(10, 31, 92, 0.28); --bs-primary-rgb: 10, 31, 92; --bs-secondary-rgb: 209, 0, 33; --bs-body-bg: var(--brand-cream); --bs-link-color: var(--brand-primary); --bs-link-hover-color: var(--brand-accent-700); } body.theme-royal { --brand-primary: #3B1877; /* deep royal violet */ --brand-primary-700: #522099; --brand-primary-900: #220d45; --brand-primary-rgb: 59, 24, 119; --brand-accent: #e8a23a; /* warm gold */ --brand-accent-300: #f5c878; --brand-accent-700: #b87a1e; --brand-accent-rgb: 232, 162, 58; --brand-secondary: #DA5A2A; /* burnt orange */ --brand-secondary-300: #f0916a; --brand-secondary-700: #a83f1a; --brand-cream: #fbf1e7; --brand-cream-2: #f3dfc8; --bs-primary-rgb: 59, 24, 119; --bs-secondary-rgb: 232, 162, 58; } body.theme-rose { --brand-primary: #0f3a3a; --brand-primary-700: #1d5a5a; --brand-primary-900: #062323; --brand-primary-rgb: 15, 58, 58; --brand-accent: #d57a8a; --brand-accent-300: #f0b5bf; --brand-accent-700: #a14f60; --brand-accent-rgb: 213, 122, 138; --brand-secondary: #c44660; --brand-cream: #fbf3ef; --brand-cream-2: #f3e2da; --bs-primary-rgb: 15, 58, 58; --bs-secondary-rgb: 213, 122, 138; }