/* ============================================================ THE MARYAM WOMEN'S INCORPORATION — Core Tokens Colors + Typography foundations "Empowering Hope • Transforming Lives" ============================================================ */ /* Fonts are loaded via Google Fonts in HTML : Montserrat (display / wordmark match) + Mulish (body). See README › Caveats for the wordmark-font substitution note. */ :root { /* ---- BRAND PALETTE ---------------------------------------- */ /* Magenta — the heart of the brand (sampled from the logo) */ --magenta: #C42B86; /* primary brand color */ --magenta-bright: #D02B8A; /* logo highlight / accents */ --magenta-deep: #9E2068; /* hover / pressed / depth */ --magenta-700: #7E1A53; /* text on light tints */ /* Purple — partner hue for gradients & secondary surfaces */ --purple: #6E2A7E; --purple-deep: #45184F; --purple-900: #2C0F33; /* Pinks — soft tints for backgrounds & fills */ --pink-100: #FBE9F3; --pink-200: #F4CFE3; --pink-300: #E9AECF; /* Ink & neutrals */ --black: #141114; /* near-black, slight warmth */ --ink: #211A1F; --charcoal: #463C42; --slate: #6E5C66; /* muted body / captions */ --line: #ECDFE7; /* hairline borders */ --line-strong: #D8C4D2; --surface: #FAF5F8; /* off-white page background */ --surface-2: #F3EAF0; /* alt section background */ --white: #FFFFFF; /* ---- SEMANTIC (status) ------------------------------------ */ --success: #2F8F5B; --warning: #C98A1E; --danger: #C0392B; --info: #6E2A7E; /* ---- GRADIENTS -------------------------------------------- */ --grad-brand: linear-gradient(135deg, #C42B86 0%, #7E1A53 100%); --grad-deep: linear-gradient(135deg, #9E2068 0%, #4A0F2C 100%); --grad-ink: linear-gradient(160deg, #2A0E1C 0%, #141114 100%); /* readability scrim for text over imagery */ --scrim: linear-gradient(180deg, rgba(20,17,20,0) 0%, rgba(20,17,20,.78) 100%); /* ---- FOREGROUND TOKENS ------------------------------------ */ --fg1: var(--ink); /* primary text */ --fg2: var(--slate); /* secondary text */ --fg3: #9A8B93; /* tertiary / placeholder */ --fg-on-dark: #FFFFFF; --fg-on-dark-2: rgba(255,255,255,.74); /* ---- TYPE FAMILIES ---------------------------------------- */ --font-display: "Montserrat", "Arial Black", system-ui, sans-serif; --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "SFMono-Regular", ui-monospace, "Roboto Mono", monospace; /* ---- TYPE SCALE (clamped, responsive) --------------------- */ --t-display: 700 clamp(2.6rem, 5vw, 4.2rem)/1.04 var(--font-display); --t-h1: 700 clamp(2.1rem, 3.6vw, 3rem)/1.08 var(--font-display); --t-h2: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.14 var(--font-display); --t-h3: 600 1.3rem/1.25 var(--font-display); --t-h4: 600 1.075rem/1.3 var(--font-display); --t-lead: 400 clamp(1.075rem, 1.5vw, 1.25rem)/1.6 var(--font-body); --t-body: 400 1rem/1.65 var(--font-body); --t-small: 400 .875rem/1.55 var(--font-body); --t-caption: 600 .75rem/1.4 var(--font-body); --t-eyebrow: 700 .75rem/1 var(--font-display); /* + letter-spacing */ /* ---- SPACING (4px base) ----------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- RADII ------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- SHADOWS / ELEVATION ---------------------------------- */ --sh-1: 0 1px 2px rgba(20,17,20,.06), 0 1px 3px rgba(20,17,20,.08); --sh-2: 0 4px 10px rgba(20,17,20,.07), 0 2px 4px rgba(20,17,20,.06); --sh-3: 0 12px 28px rgba(126,26,83,.13), 0 4px 10px rgba(20,17,20,.07); --sh-4: 0 24px 56px rgba(126,26,83,.20), 0 8px 18px rgba(20,17,20,.10); --sh-magenta: 0 12px 30px rgba(196,43,134,.32); /* ---- MOTION ----------------------------------------------- */ --ease: cubic-bezier(.22,.61,.36,1); /* gentle ease-out */ --ease-soft: cubic-bezier(.4,0,.2,1); --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms; } /* ============================================================ SEMANTIC ELEMENT STYLES (opt-in via .ds-prose or direct use) ============================================================ */ .ds-eyebrow { font: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--magenta); } .ds-display { font: var(--t-display); letter-spacing: -.02em; color: var(--fg1); } h1, .ds-h1 { font: var(--t-h1); letter-spacing: -.015em; color: var(--fg1); } h2, .ds-h2 { font: var(--t-h2); letter-spacing: -.01em; color: var(--fg1); } h3, .ds-h3 { font: var(--t-h3); color: var(--fg1); } h4, .ds-h4 { font: var(--t-h4); color: var(--fg1); } .ds-lead { font: var(--t-lead); color: var(--fg2); } .ds-body, p { font: var(--t-body); color: var(--fg1); } .ds-small { font: var(--t-small); color: var(--fg2); } .ds-caption { font: var(--t-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); } code, .ds-mono { font-family: var(--font-mono); font-size: .9em; }