/* ============================================================ JELEOSINMI — DESIGN SYSTEM /assets/css/variables.css These are the DEFAULTS. The (Phase B) Appearance admin page will override a curated subset of these via an injected :root{} block in , falling back to everything here. ============================================================ */ :root { /* ── Brand Colors ──────────────────────────────────────── */ --red: #C8003C; --red-dark: #A0002E; --red-light: #F5CEDA; --red-faint: #FFF0F4; /* Green — secondary accent (e.g. "Learn more", secondary CTAs). Red stays primary; green is the supporting action colour. */ --green: #1E8A4E; --green-dark: #166B3C; --green-light: #BFE6CD; --green-faint: #EAF7EF; --yellow: #F5C400; --yellow-dark: #C49B00; --yellow-bg: #FFFBE6; --blue: #1A6FBF; --mint: #3DBD87; --mint-bg: #EDFAF4; --cream: #FBF5EE; --cream-dark: #EDE3D6; --cream-darker: #D6C9B6; /* Dark — warm deep charcoal, NOT flat black. Used for body text and for the dark bands (footer, hero, topbar). --ink is an alias for places that specifically mean "text". */ --dark: #2D2420; --ink: #2D2420; --mid: #555555; --gray: #999999; --light-gray: #CCCCCC; --white: #FFFFFF; /* ── Status Colors ────────────────────────────────────── */ --success: #1A7A50; --success-bg: #EDFAF4; --warning: #92600A; --warning-bg: #FFFBE6; --danger: #C8003C; --danger-bg: #FFF0F4; --info: #1A6FBF; --info-bg: #EBF3FC; /* ── Typography ───────────────────────────────────────── */ --font-display: 'Fredoka', 'Segoe UI', system-ui, sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-hand: 'Caveat', 'Segoe Script', cursive; /* ── Spacing ──────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Border Radius ────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ── Shadows ──────────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.10); --shadow-red: 0 4px 14px rgba(200,0,60,0.25); --shadow-green:0 4px 14px rgba(30,138,78,0.25); /* ── Transitions ──────────────────────────────────────── */ --ease: all 0.2s ease; --ease-slow: all 0.4s ease; /* ── Layout ───────────────────────────────────────────── */ --max-width: 1280px; --topbar-h: 38px; --navbar-h: 84px; }