/* ===================================================== WAHE.WORLD — Design Tokens (single source of truth) TIER 1 (site core): loaded first by every page across every vertical (landing, banis, book, learn). All color, type, spacing, radius, shadow and motion names live here. Do NOT redeclare these anywhere else — link this file. ── Multi-faith theming ── The :root values below ARE the active-faith defaults (Sikhi today). faith.js sets on load. To add a faith's skin, add a `[data-faith=""]` block at the bottom of this file overriding only the tokens that change (palette + --font-native). Nothing that consumes a token needs to know which faith is active — it just reads the variable. ===================================================== */ :root { /* ── Backgrounds (Amritvela navy) ── */ --bg-deep: hsl(245, 24%, 3.5%); --bg-dark: hsl(245, 20%, 5%); --bg-glass: hsla(245, 25%, 5%, 0.65); --bg-glass-hover: hsla(245, 20%, 9%, 0.85); --bg-card: hsla(245, 25%, 7%, 0.7); --bg-card-hover: hsla(245, 20%, 10%, 0.85); /* ── Borders ── */ --border-light: hsla(0, 0%, 100%, 0.035); --border-subtle: hsla(0, 0%, 100%, 0.04); --border-gold-glow: hsla(38, 100%, 53%, 0.12); --border-gold: hsla(38, 100%, 53%, 0.18); --border-gold-hi: hsla(38, 100%, 53%, 0.4); /* ── Saffron & gold ── */ --gold: hsl(38, 100%, 53%); --gold-primary: hsl(38, 100%, 53%); --gold-bright: hsl(38, 100%, 64%); --gold-dim: hsl(38, 55%, 32%); --gold-glow: hsla(38, 100%, 53%, 0.13); --gold-glow-lg: hsla(38, 100%, 53%, 0.06); /* ── Indigo / violet / accents ── */ --indigo: hsl(262, 75%, 65%); --indigo-primary: hsl(262, 75%, 65%); --purple-glow: hsla(262, 70%, 55%, 0.12); --teal: hsl(176, 60%, 52%); --teal-glow: hsla(176, 60%, 52%, 0.13); --rose: hsl(340, 70%, 60%); /* ── Text ── */ --text-primary: hsl(0, 0%, 96%); --text-secondary: hsl(240, 15%, 82%); --text-muted: hsl(240, 8%, 56%); --text-gold: hsl(38, 80%, 72%); --text-gurmukhi: hsl(38, 90%, 88%); /* ── Radii ── */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 50px; /* ── Spacing ── */ --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; /* ── Fonts ── */ --font-heading: 'Cinzel Decorative', serif; --font-body: 'Outfit', sans-serif; --font-logo: 'Mukta Mahee', sans-serif; --font-gurmukhi: 'Noto Serif Gurmukhi', 'Noto Serif', Georgia, serif; /* Faith-neutral alias for the sacred-text font. New verticals should consume --font-native; a faith pack overrides it (e.g. a Devanagari stack) without touching the engines. --font-gurmukhi is kept for the existing Sikhi reader CSS that references it by name. */ --font-native: var(--font-gurmukhi); /* ── Shadows & transitions ── */ --shadow-card: 0 15px 45px rgba(0, 0, 0, 0.7); --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); --transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1); } /* ===================================================== Per-faith theme overrides faith.js sets . Add a block here per faith, overriding ONLY the tokens that differ from the :root (Sikhi) defaults above. Example skeleton for a future pack — uncomment, rename, and tune the palette when the faith ships: [data-faith="radha-vallabh"] { --bg-deep: hsl(345, 30%, 4%); --gold: hsl(340, 85%, 60%); |* primary accent *| --gold-primary: var(--gold); --indigo: hsl(150, 55%, 55%); --font-native: 'Noto Serif Devanagari', 'Noto Serif', serif; } ===================================================== */