/* ============================================================ Caelova Design System — Saffron & Slate v1.0 Foundation token layer: :root (light) + [data-theme="dark"] Source of truth: Caelova_Saffron_Slate_v1.0.pdf Load order: this file replaces tokens.css as the FIRST stylesheet in . Every downstream stylesheet (style.css, theme.css, calendar.css, inline page styles) references these tokens. RULES: • No raw hex values outside this file • Three accents only: saffron, vermillion, teal • All borders: 0.5px solid var(--border) • No box shadows, no gradients, no glow effects • Saffron stays #E07820 in BOTH modes ============================================================ */ /* ──────────────────────────────────────────────────────────── 01 BASE PALETTE — LIGHT MODE (default) ──────────────────────────────────────────────────────────── */ :root { /* Background scale */ --bg-primary: #F7F3EB; /* Page background */ --bg-surface: #FFFCF7; /* Cards, inputs */ --bg-surface-2: #F1EBE1; /* Pressed / hover states */ /* Ink (text) scale — 3-stop hierarchy */ --ink-primary: #2A2520; /* Headlines, body text */ --ink-secondary: #5C554D; /* Labels, captions */ --ink-tertiary: #766E64; /* Placeholders, disabled */ /* Borders & dividers */ --border: #D8D0C4; /* Dividers, outlines */ /* ────────────────────────────────────────────────────────── 02 ACCENT TOKENS — identical in both modes (except vermillion & teal which shift for contrast) ────────────────────────────────────────────────────────── */ --saffron: #E07820; /* CTA, active nav, eyebrows, focus rings */ --vermillion: #6B2E1A; /* Urgent/destructive · light mode */ --teal: #2B5C4E; /* Benefic/positive · light mode */ /* ────────────────────────────────────────────────────────── 05 GRAHA (PLANET) COLOR MAP Usage: planet tags use these as TEXT color on var(--bg-surface). Never as filled backgrounds, except active dasha pill which uses var(--saffron) fill. ────────────────────────────────────────────────────────── */ --surya: #E07820; /* Sun — saffron (primary accent) */ --chandra: #A09890; /* Moon — cream secondary */ --mangal: var(--vermillion);/* Mars — vermillion (urgency) */ --budh: var(--teal); /* Mercury — teal (positive/calm) */ --guru: #8A6A10; /* Jupiter — deep amber/gold */ --shukra: var(--teal); /* Venus — teal (positive/calm) */ --shani: #5A544C; /* Saturn — ink-secondary (dark/muted) */ --rahu: #2A2620; /* Rahu — darkest surface (shadowy) */ --ketu: #8A8480; /* Ketu — ink-tertiary (neutral) */ /* ────────────────────────────────────────────────────────── BACKWARD-COMPAT ALIASES Maps legacy token names (used in style.css, theme.css, and inline EJS styles) to the new Saffron & Slate v1.0 names. Prevents breakage while we migrate. ────────────────────────────────────────────────────────── */ --bg-page: var(--bg-primary); --bg-raised: var(--bg-surface-2); --gold: var(--saffron); --gold-lt: var(--saffron); --bg-card: var(--bg-surface); --text-dim: var(--ink-secondary); --ink-m: var(--ink-tertiary); /* Legacy shorthand aliases from inline critical CSS */ --cream: var(--bg-primary); --warm: var(--bg-surface); --ink: var(--ink-primary); --ink-s: var(--ink-secondary); /* RGB triplets for rgba() usage (CSS var() can't nest inside rgba). These match the light-mode hex values from Section 01. */ --bg-primary-rgb: 242, 237, 227; --bg-surface-rgb: 227, 221, 210; --ink-primary-rgb: 42, 38, 32; --ink-secondary-rgb:90, 84, 76; --saffron-rgb: 224, 120, 32; --vermillion-rgb: 107, 46, 26; --teal-rgb: 43, 92, 78; /* Chart / dark panel tokens (legacy) — kept for the SVG kundali renderer and aspect-panel which use these directly */ --chart-bg: #FFFCF7; --chart-panel: #FFFCF7; --chart-line: #4A4037; --chart-text-1: #2A2520; --chart-text-2: #5C554D; --chart-text-3: #766E64; --chart-accent: var(--saffron); /* Component tokens (legacy) */ --pada-bg: #E8D8B8; --pada-text: #3A2A1A; --icon-surface: #F0D8B0; --icon-fill: #D4905A; --input-bg: var(--bg-surface); --saf-text: #FFF3E0; } /* ──────────────────────────────────────────────────────────── 01 BASE PALETTE — DARK MODE Activated by setting data-theme="dark" on . Only the tokens that CHANGE are redeclared. Saffron stays #E07820 — it is mode-invariant by spec. ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Background scale */ --bg-primary: #1A1712; /* Page background */ --bg-surface: #2A2620; /* Cards, inputs */ --bg-surface-2: #342E28; /* Pressed / hover states */ /* Ink (text) scale */ --ink-primary: #EDE8DF; /* Headlines, body text */ --ink-secondary: #A09890; /* Labels, captions */ --ink-tertiary: #605850; /* Placeholders, disabled */ /* Borders & dividers */ --border: #3A3430; /* Dividers, outlines */ /* Accents that shift for dark-mode contrast */ --vermillion: #C4714A; /* Urgent/destructive · dark mode */ --teal: #4A8C78; /* Benefic/positive · dark mode */ /* Graha overrides for dark mode */ --rahu: #342E28; /* Rahu — darkest surface (dark mode) */ /* Chart / dark panel tokens */ --chart-bg: #0F0D0A; --chart-panel: #1E1A14; --chart-line: #3A3430; --chart-text-1: #EDE8DF; --chart-text-2: #A09890; --chart-text-3: #605850; /* Component tokens */ --pada-bg: #342E28; --pada-text: #EDE8DF; --icon-surface: #342E28; --icon-fill: #E07820; --saf-text: #FFF3E0; /* RGB triplets — dark mode */ --bg-primary-rgb: 26, 23, 18; --bg-surface-rgb: 42, 38, 32; --ink-primary-rgb: 237, 232, 223; --ink-secondary-rgb:160, 152, 144; --saffron-rgb: 224, 120, 32; --vermillion-rgb: 196, 113, 74; --teal-rgb: 74, 140, 120; } /* ──────────────────────────────────────────────────────────── 04 TYPOGRAPHY TOKENS Font stacks, sizes, and hierarchy as CSS custom properties. Components reference these instead of hardcoding font rules. ──────────────────────────────────────────────────────────── */ :root { /* Font stacks */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Jost', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-deva: 'Noto Sans Devanagari', 'Hind', sans-serif; /* Type scale — matched to Homepage standards */ --text-display: 52px; --text-title-1: 34px; --text-title-2: 24px; --text-eyebrow: 14.5px; --text-body: 18px; --text-caption: 14.5px; /* Weights */ --weight-display: 700; --weight-title: 700; --weight-eyebrow: 700; --weight-body: 400; --weight-caption: 400; /* Line heights */ --lh-display: 1.2; --lh-title: 1.3; --lh-body: 1.7; --lh-caption: 1.4; /* Tracking */ --tracking-eyebrow: 0.08em; --tracking-nav: 0.12em; /* Border width — the ONE border spec for the whole system */ --border-width: 0.5px; /* Focus ring */ --focus-ring: 1.5px solid var(--saffron); /* Transition defaults */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); --duration: 0.2s; }