/*========================================================== KUMAR BHUSHAN MINISTRY — Design Tokens Elegant · Minimal · Professional ==========================================================*/ :root { /* Brand — "BibleProject-inspired": a bold illustrated-editorial palette. Indigo blue stays the anchor brand color (header/footer/ links), with warm terracotta and mustard as the accent colors used across cards, tags and highlights, on a warmer parchment background. Not an exact copy of BibleProject's proprietary brand colors — we don't have verified access to those — but the same family: confident indigo + warm terracotta/gold on cream. */ --primary: #24486E; --primary-dark: #16314E; --primary-light: #E7EEF5; --secondary: #D9A02C; --secondary-dark: #B17F1C; --secondary-light: #FBF0DC; --terracotta: #C0532E; --terracotta-dark: #9B4224; --terracotta-light: #F7E4DA; --sage: #7C9070; --sage-light: #EDF1E8; --accent: #2E7D32; --link-accent: #2385E8; /* Neutrals */ --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #3A342A; --gray-800: #2B2620; --gray-900: #211D16; /* Semantic */ --text: var(--gray-700); --text-light: #756B5C; --heading: var(--gray-900); --border: #E7DDC8; --background: #FAF3E4; --background-alt: #F2E7D2; --surface: #FFFDF8; --surface-cream: #FCF6E9; /* Typography */ --font-body: "Inter", "Noto Sans Devanagari", system-ui, sans-serif; --font-heading: "Inter", "Noto Sans Devanagari", system-ui, sans-serif; --fs-base: 1rem; --lh-body: 1.75; --lh-heading: 1.25; /* Spacing */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 6rem; /* Layout */ --container: 1180px; --header-h: 76px; --topbar-h: 40px; --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; /* Effects */ --shadow-sm: 0 2px 8px rgba(120, 98, 52, 0.07); --shadow-md: 0 8px 24px rgba(120, 98, 52, 0.10); --shadow-lg: 0 16px 48px rgba(120, 98, 52, 0.14); --shadow-card: 0 6px 22px rgba(120, 98, 52, 0.09); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /*========================================================== DARK MODE — overrides the semantic tokens only, so every component that already uses var(--text), var(--background) etc. gets dark mode for free with zero extra CSS per-component. Toggled via [data-theme="dark"] on (assets/js/dark-mode.js). ==========================================================*/ :root[data-theme="dark"] { --text: var(--gray-200); --text-light: var(--gray-400); --heading: #F8FAFC; --border: var(--gray-700); --background: var(--gray-900); --background-alt: #12192B; --surface: var(--gray-800); --primary-light: rgba(15, 76, 129, 0.25); --secondary-light: rgba(201, 162, 39, 0.15); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] body { background: var(--background); color: var(--text); }