/* ========================================================================== BibleShield — Design Tokens Single source of truth for brand color, type, spacing and elevation. Light + dark themes via [data-theme] on . ========================================================================== */ :root { /* Brand core (mode-independent) */ --brand-purple: #6B4FBB; --brand-purple-dark: #4A3585; --brand-gold: #E8A33D; --brand-navy: #1D3557; --brand-tan: #D4A373; /* Focus palette (spiritual focus themes) */ --focus-peace: #4A7C59; --focus-discipline: #6B4FBB; --focus-hope: #D4A373; --focus-purpose: #1D3557; --focus-strength: #9B2226; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-display: "Fraunces", "Source Serif 4", Georgia, serif; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* Layout */ --container: 1120px; --container-narrow: 760px; --header-height: 68px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(31, 27, 41, 0.06), 0 1px 3px rgba(31, 27, 41, 0.08); --shadow-md: 0 4px 12px rgba(31, 27, 41, 0.08), 0 2px 4px rgba(31, 27, 41, 0.06); --shadow-lg: 0 12px 32px rgba(31, 27, 41, 0.14), 0 4px 8px rgba(31, 27, 41, 0.08); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; } /* Light theme (default) */ :root, :root[data-theme="light"] { color-scheme: light; --primary: var(--brand-purple); --primary-strong: var(--brand-purple-dark); --primary-soft: #E9E5F0; --accent: var(--brand-gold); --accent-soft: #FAEDCD; --bg: #F8F9FA; --bg-elevated: #F3F1F7; --surface: #FFFFFF; --surface-raised: #FDFCFF; --text: #1F1B29; --text-secondary: #55505F; --text-muted: #9A94A6; --text-on-primary: #FFFFFF; --text-on-accent: #1F1B29; --divider: #E1DCE9; --ring: rgba(107, 79, 187, 0.35); --success: #217048; --warning: #8A5209; --error: #C22B37; --hero-grad-a: #4A3585; --hero-grad-b: #1D3557; --shadow-sm: 0 1px 2px rgba(31, 27, 41, 0.06), 0 1px 3px rgba(31, 27, 41, 0.08); --shadow-md: 0 4px 12px rgba(31, 27, 41, 0.08), 0 2px 4px rgba(31, 27, 41, 0.06); --shadow-lg: 0 12px 32px rgba(31, 27, 41, 0.14), 0 4px 8px rgba(31, 27, 41, 0.08); } /* Dark theme */ :root[data-theme="dark"] { color-scheme: dark; --primary: #9E86E3; --primary-strong: #6B4FBB; --primary-soft: #1F1A2B; --accent: var(--brand-gold); --accent-soft: #2B251D; --bg: #0F0E14; --bg-elevated: #121212; --surface: #17161F; --surface-raised: #282332; --text: #E6E1ED; --text-secondary: #9B97A6; --text-muted: #6B6675; --text-on-primary: #0F0E14; --text-on-accent: #0F0E14; --divider: #332E3D; --ring: rgba(158, 134, 227, 0.45); --success: #4CAF7D; --warning: #E8A33D; --error: #E5636A; --hero-grad-a: #221A3E; --hero-grad-b: #101823; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35); }