/* ============================================================ divinelore.com — tokens.css Design tokens: colors, type, spacing, radius, z-index, motion. Imported by every page. Section accents are surfaced as --section-accent so any page can theme itself by setting one variable on . ============================================================ */ :root { color-scheme: light; /* ---------- Base palette (light) ---------- */ --color-base-bg: #FDFAF6; /* warm off-white, NOT pure white */ --color-base-surface: #F5F1EA; /* card backgrounds, slightly warmer */ --color-base-elevated: #FFFFFF; /* dropdown / modal lift above surface */ --color-base-border: #E8E2D9; /* subtle warm borders */ --color-base-border-strong: #D5CCBE; --color-text-primary: #1A1714; /* near-black with warm undertone */ --color-text-secondary: #6B6560; /* muted warm gray for descriptions */ --color-text-tertiary: #A09990; /* hints, labels, timestamps */ --color-text-inverse: #FDFAF6; --color-accent-global: #2C2C2A; /* global CTA, headings */ /* ---------- Signature gradient (brand / cross-section surfaces only) ---------- The ONE sanctioned lavender->periwinkle gradient. Use on brand-level surfaces that are NOT tied to a single section accent: homepage spotlight card + digest band + solid pills, and the /tools/ hub. Do NOT use on section/encyclopedia pages — those keep their --section-accent. See CLAUDE.md "no purple gradients". */ --grad-signature: radial-gradient(135% 125% at 20% 10%, rgba(255,255,255,0.30), rgba(255,255,255,0) 52%), linear-gradient(152deg, #9B8FD4 0%, #6E7FD0 52%, #5E8DC4 100%); --grad-signature-flat: linear-gradient(135deg, #9B8FD4 0%, #6E7FD0 50%, #5E8DC4 100%); --grad-signature-deep: linear-gradient(150deg, #7E72C2 0%, #5B6CC2 52%, #4E81B6 100%); --grad-signature-halo: #6E7FD0; /* tint for elevation shadows under signature surfaces */ /* ---------- Section accents ---------- */ --accent-astrology: #7B5EA7; --accent-numerology: #2E86AB; --accent-vastu: #C17A3C; --accent-tarot: #8B3A52; --accent-palmistry: #4A7C6F; --accent-ayurveda: #B85C2A; --accent-crystals: #5B8DB8; --accent-symbols: #8B7355; --accent-muhurat: #C4973B; --accent-fengshui: #5C8A5C; /* Active section accent — overridden per page. Default: deep ink for the global homepage. */ --section-accent: var(--color-accent-global); --section-accent-soft: rgba(44, 44, 42, 0.08); --section-accent-line: rgba(44, 44, 42, 0.3); /* ---------- Type ---------- */ --font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Apple Garamond", Garamond, "Times New Roman", serif; --font-numeral: "Cormorant", "Cormorant Garamond", "EB Garamond", serif; --font-body: "DM Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --text-hero: 64px; --text-h1: 42px; --text-h2: 28px; --text-h3: 20px; --text-h4: 16px; --text-body-lg: 18px; --text-body: 16px; --text-sm: 14px; --text-xs: 12px; --text-tool-num: 56px; --lh-hero: 1.1; --lh-h1: 1.2; --lh-h2: 1.3; --lh-h3: 1.4; --lh-body-lg: 1.8; --lh-body: 1.75; --lh-sm: 1.6; --lh-tight: 1.05; --tracking-display: -0.01em; --tracking-eyebrow: 0.1em; --tracking-body: 0; /* ---------- Spacing (8px base) ---------- */ --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: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ---------- Layout ---------- */ --container-max: 1200px; --content-max: 760px; --tool-max: 900px; --nav-h-desktop: 64px; --nav-h-mobile: 56px; --bottom-nav-h: 56px; /* ---------- Elevation ---------- */ --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.04); --shadow-md: 0 4px 16px rgba(26, 23, 20, 0.06); --shadow-lg: 0 8px 32px rgba(26, 23, 20, 0.08); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 360ms; /* ---------- Z-index ---------- */ --z-sticky: 10; --z-header: 40; --z-overlay: 50; --z-modal: 60; --z-toast: 80; /* ---------- Geometry texture ---------- */ --geometry-opacity: 0.04; } /* ============================================================ Section overrides — set a section accent by adding data-section="" to the or any container. The section's accent becomes the active accent for everything inside it. ============================================================ */ [data-section="astrology"] { --section-accent: var(--accent-astrology); } [data-section="numerology"] { --section-accent: var(--accent-numerology); } [data-section="vastu"] { --section-accent: var(--accent-vastu); } [data-section="tarot"] { --section-accent: var(--accent-tarot); } [data-section="palmistry"] { --section-accent: var(--accent-palmistry); } [data-section="ayurveda"] { --section-accent: var(--accent-ayurveda); } [data-section="crystals"] { --section-accent: var(--accent-crystals); } [data-section="symbols"] { --section-accent: var(--accent-symbols); } [data-section="muhurat"] { --section-accent: var(--accent-muhurat); } [data-section="fengshui"] { --section-accent: var(--accent-fengshui); } /* Derived soft tints — computed at usage sites via color-mix where supported. */ @supports (color: color-mix(in srgb, red, blue)) { [data-section] { --section-accent-soft: color-mix(in srgb, var(--section-accent) 10%, transparent); --section-accent-line: color-mix(in srgb, var(--section-accent) 30%, transparent); --section-accent-hover: color-mix(in srgb, var(--section-accent) 40%, transparent); } } /* ============================================================ Light-only site. Dark mode has been removed by owner request; the site always renders in the warm light palette regardless of OS preference. color-scheme:light (set on :root above) keeps native UI (scrollbars, form controls) light too. [data-theme="light"] is kept because every page hardcodes ; there is intentionally no dark variant. ============================================================ */ [data-theme="light"] { --color-base-bg: #FDFAF6; --color-base-surface: #F5F1EA; --color-base-elevated: #FFFFFF; --color-base-border: #E8E2D9; --color-text-primary: #1A1714; --color-text-secondary: #6B6560; --color-text-tertiary: #A09990; --color-text-inverse: #FDFAF6; --color-accent-global: #2C2C2A; }