/* ═══════════════════════════════════════════════════ MEDHYA — LEAD MAGNET CSS VARIABLES Drop this :root block into every guide. Change only --accent and --accent-tint per topic. ═══════════════════════════════════════════════════ */ /* Google Fonts import — add to before this stylesheet */ /* */ :root { /* ── BACKGROUNDS ─────────────────────────── */ --bg-page: #FAF8F4; /* warm parchment — main page bg */ --bg-surface: #F5F1EB; /* warm linen — cards, voice blocks */ --bg-muted: #EDE8DF; /* warm stone — subtle sections */ --bg-moss: #EAF0E8; /* pale sage — mechanism blocks */ --bg-amber: #FDF3E4; /* warm honey — Ayurvedic callouts */ /* ── TEXT ────────────────────────────────── */ --text-primary: #1E1A14; /* near-black warm — headings */ --text-body: #3D352A; /* dark warm brown — all body text */ --text-secondary: #6B5E4A; /* mid warm brown — supporting text */ --text-muted: #9C8E7A; /* taupe — labels, captions */ /* ── GREENS ──────────────────────────────── */ --green-deep: #2D4A35; /* forest — headings on light bg */ --green-mid: #3D6B4A; /* herb — sub-headings, borders */ --green-soft: #5C8C68; /* sage — links, expand toggles */ --green-pale: #C8DBC8; /* mist — dividers, card borders */ --green-tint: #EAF0E8; /* same as --bg-moss */ /* ── AMBER ───────────────────────────────── */ --amber-deep: #8C5E1A; /* dark honey — Ayurvedic text */ --amber-mid: #C4893A; /* turmeric — CTA button */ --amber-pale: #E8C88A; /* golden — amber block borders */ --amber-tint: #FDF3E4; /* same as --bg-amber */ /* ── TERRACOTTA ──────────────────────────── */ --terra-mid: #B5613E; /* clay — stress/cortisol accent */ --terra-tint: #F7EAE4; /* blush — terracotta bg */ /* ── BORDERS ─────────────────────────────── */ --border-soft: rgba(44, 36, 22, 0.10); --border-mid: rgba(44, 36, 22, 0.18); --border-green: rgba(45, 74, 53, 0.25); --border-amber: rgba(196, 137, 58, 0.30); /* ── WHITE ───────────────────────────────── */ --white: #FFFDF9; /* warm white — never pure #FFFFFF */ /* ── TYPOGRAPHY ──────────────────────────── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Font sizes — desktop. Scale down ~10% on mobile */ --text-xs: 11px; /* fine print, disclaimers */ --text-sm: 13px; /* captions, labels uppercase */ --text-base: 15px; /* body text */ --text-md: 17px; /* large body, card practice text */ --text-lg: 22px; /* sub-headings, section titles */ --text-xl: 28px; /* section H1 */ --text-2xl: 38px; /* page-level headings */ --text-3xl: 52px; /* cover / hero title */ /* Font weights */ --weight-light: 300; /* body text, secondary */ --weight-regular: 400; /* default, labels */ --weight-medium: 500; /* sub-headings, badge labels */ --weight-semibold:600; /* card titles, section headings */ --weight-bold: 700; /* hero title, CTA heading */ /* Line heights */ --lh-tight: 1.2; /* large display headings */ --lh-snug: 1.4; /* medium headings, chain steps */ --lh-normal: 1.6; /* sub-headings, practice names */ --lh-relaxed: 1.75; /* body text default */ --lh-loose: 1.9; /* small body, long-form reading */ /* Letter spacing */ --tracking-tight: -0.02em; /* large headings — tighten */ --tracking-normal: 0em; /* body text */ --tracking-wide: 0.06em; /* medium labels */ --tracking-wider: 0.12em; /* small uppercase labels */ --tracking-widest: 0.20em; /* wordmark / brand tag */ /* ── SPACING ─────────────────────────────── */ --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: 80px; /* ── RADIUS ──────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 100px; /* ── LAYOUT ──────────────────────────────── */ --max-width: 680px; /* centred on desktop */ --page-padding: 24px; /* horizontal padding mobile */ /* ── TOPIC ACCENT — CHANGE PER GUIDE ─────── */ /* Gut / Bloating (default) */ --accent: #3D6B4A; --accent-tint: #EAF0E8; /* Fatigue → swap to: --accent: #C4893A; --accent-tint: #FDF3E4; */ /* Brain Fog → swap to: --accent: #3D6B6B; --accent-tint: #E8F0F0; */ /* Cortisol → swap to: --accent: #B5613E; --accent-tint: #F7EAE4; */ /* Hormones → swap to: --accent: #9C5A4E; --accent-tint: #F7EDEC; */ /* Skin → swap to: --accent: #B8943A; --accent-tint: #FDF3E0; */ } /* ═══════════════════════════════════════════════════ TYPE USAGE REFERENCE — for developer Apply these combinations to matching elements ═══════════════════════════════════════════════════ WORDMARK / BRAND TAG font: var(--weight-semibold) var(--text-sm) / 1 var(--font) letter-spacing: var(--tracking-widest) text-transform: uppercase color: var(--green-mid) HERO / COVER TITLE font: var(--weight-bold) var(--text-3xl) / var(--lh-tight) var(--font) letter-spacing: var(--tracking-tight) color: var(--green-deep) SECTION HEADING (H1) font: var(--weight-bold) var(--text-2xl) / var(--lh-tight) var(--font) letter-spacing: var(--tracking-tight) color: var(--green-deep) SUB-HEADING (H2) font: var(--weight-semibold) var(--text-lg) / var(--lh-normal) var(--font) letter-spacing: var(--tracking-tight) color: var(--green-mid) SECTION LABEL (uppercase tag above a block) font: var(--weight-medium) var(--text-xs) / 1 var(--font) letter-spacing: var(--tracking-wider) text-transform: uppercase color: var(--text-muted) BODY TEXT (main paragraphs) font: var(--weight-light) var(--text-base) / var(--lh-relaxed) var(--font) color: var(--text-body) NIDHI'S VOICE / PULLQUOTE font: var(--weight-light) var(--text-md) / var(--lh-loose) var(--font) color: var(--text-primary) — no italic — weight and size do the work PRACTICE NAME (card title) font: var(--weight-semibold) var(--text-md) / var(--lh-normal) var(--font) color: var(--text-primary) PRACTICE BODY (card description) font: var(--weight-light) var(--text-base) / var(--lh-relaxed) var(--font) color: var(--text-secondary) MECHANISM CHAIN — STEP font: var(--weight-medium) var(--text-sm) / var(--lh-snug) var(--font) color: var(--green-deep) MECHANISM CHAIN — SUB TEXT font: var(--weight-light) var(--text-xs) / var(--lh-normal) var(--font) color: var(--text-muted) AYURVEDIC TEXT font: var(--weight-light) var(--text-base) / var(--lh-relaxed) var(--font) color: var(--amber-deep) AYURVEDIC BRIDGE LINE font: var(--weight-medium) var(--text-sm) / var(--lh-normal) var(--font) color: var(--amber-mid) BADGE LABEL (MORNING / FOOD / HERB etc) font: var(--weight-semibold) var(--text-xs) / 1 var(--font) letter-spacing: var(--tracking-wide) text-transform: uppercase BUTTON TEXT font: var(--weight-semibold) var(--text-base) / 1 var(--font) letter-spacing: var(--tracking-wide) color: var(--white) CAPTION / FINE PRINT font: var(--weight-regular) var(--text-xs) / var(--lh-normal) var(--font) color: var(--text-muted) ═══════════════════════════════════════════════════ */