/* ========================================================================== 01-TOKENS — Mercy Outreach Global India -------------------------------------------------------------------------- THE SINGLE SOURCE OF TRUTH. This is the ONLY stylesheet permitted to contain a raw colour value or a magic number. Every other file consumes these tokens. If you are about to type a hex code anywhere else, stop — add it here instead. Palette rationale (see PLAN.md 2A.1): every colour is an Indian material. neel — the indigo dye India exported to the world chuna — lime-plaster whitewash; cool and mineral, deliberately NOT cream genda — marigold, the flower of every threshold. DONATE ONLY. verdigris — the patina on brass and copper vessels. Data and impact only. All contrast ratios below are MEASURED with the WCAG 2.1 relative luminance formula, not estimated. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — RAW SCALE ---------------------------------------------------------------------- */ /* Grounding — neel indigo */ --c-ink: #0E1330; /* deep ground: dark sections, footer, body text */ --c-ink-90: #171D3F; --c-indigo: #1E2A5E; /* secondary depth: headings, dark cards */ --c-indigo-60: #4A5691; --c-indigo-30: #9AA3C6; /* Ground — chuna lime plaster (cool, mineral, NOT cream) */ --c-plaster: #ECEDE8; /* default page background */ --c-paper: #F7F7F4; /* raised surfaces on plaster */ --c-white: #FFFFFF; --c-line: #D8DAD2; /* hairlines on light */ --c-line-strong: #BFC2B8; /* Signal — genda marigold. RESERVED FOR DONATE ACTIONS. */ --c-marigold: #F5A524; --c-marigold-deep: #DE8F12; /* hover/active fill only */ --c-marigold-dim: #FBE3B8; /* disabled donate fill only */ /* Data / impact — verdigris */ --c-verdigris: #0F766E; /* fills, strokes, chart geometry */ --c-verdigris-ink: #0B5F59; /* TEXT-SAFE on light grounds — 7.00:1 AAA on paper */ --c-verdigris-lt: #7FE3D6; /* data accent on ink grounds — 12.01:1 AAA */ --c-verdigris-05: #E6F2F0; /* Text */ --c-text: var(--c-ink); /* 15.46:1 on plaster · 16.95:1 on paper — AAA */ --c-text-muted: #5A6180; /* 5.16:1 on plaster · 5.66:1 on paper — AA */ --c-text-inv: var(--c-white); /* 18.19:1 on ink — AAA */ --c-text-muted-inv: #A9B2D6; /* 8.68:1 on ink — AAA */ /* Status */ --c-danger: #A32020; --c-danger-bg: #FBEAEA; --c-success: #0B5F59; --c-success-bg: #E6F2F0; --c-warning: #8A5A00; --c-warning-bg: #FDF3E0; /* Semantic surface aliases — components use THESE, not the raw scale */ --surface-page: var(--c-plaster); --surface-raised: var(--c-paper); --surface-sunken: #E3E5DE; --surface-invert: var(--c-ink); --surface-invert-2: var(--c-indigo); /* ---------------------------------------------------------------------- COLOUR RULES ENFORCED BY DESIGN --marigold FAILS as a text colour: 1.73:1 on plaster, 2.04:1 on white. It is a SURFACE ONLY, always carrying --c-ink text (8.91:1, AAA). Never set color: var(--c-marigold). There is no valid use. ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------------------- */ --ff-display: "Zodiak", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --ff-body: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ff-utility: "Supreme", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-deva: "Mukta", "Noto Sans Devanagari", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Fluid type scale — 360px → 1440px viewport, no breakpoint jumps */ --fs-3xs: clamp(0.6875rem, 0.6700rem + 0.09vw, 0.7500rem); /* 11 → 12 tags, legal */ --fs-2xs: clamp(0.7500rem, 0.7200rem + 0.14vw, 0.8125rem); /* 12 → 13 captions */ --fs-xs: clamp(0.8125rem, 0.7800rem + 0.19vw, 0.8750rem); /* 13 → 14 labels */ --fs-sm: clamp(0.9375rem, 0.9100rem + 0.19vw, 1.0000rem); /* 15 → 16 UI, buttons */ --fs-base: clamp(1.0000rem, 0.9600rem + 0.28vw, 1.1250rem); /* 16 → 18 body (AAA) */ --fs-lg: clamp(1.1250rem, 1.0600rem + 0.37vw, 1.3125rem); /* 18 → 21 lead */ --fs-xl: clamp(1.3750rem, 1.2500rem + 0.65vw, 1.7500rem); /* 22 → 28 h4 / cards */ --fs-2xl: clamp(1.6250rem, 1.4200rem + 1.02vw, 2.2500rem); /* 26 → 36 h3 */ --fs-3xl: clamp(2.0000rem, 1.6500rem + 1.76vw, 3.0000rem); /* 32 → 48 h2 */ --fs-4xl: clamp(2.5000rem, 1.9400rem + 2.78vw, 4.2500rem); /* 40 → 68 h1 */ --fs-5xl: clamp(3.0000rem, 1.9400rem + 5.28vw, 6.0000rem); /* 48 → 96 hero */ --fs-num: clamp(3.2500rem, 2.0500rem + 6.02vw, 7.0000rem); /* 52 → 112 impact counter*/ --lh-tight: 1.02; /* display / hero */ --lh-snug: 1.18; /* headings */ --lh-normal: 1.62; /* body — generous, AAA-appropriate */ --lh-loose: 1.75; /* long-form article body */ --tr-display: -0.03em; --tr-tight: -0.015em; --tr-normal: 0; --tr-wide: 0.08em; /* utility caps only */ --measure: 68ch; --measure-tight: 46ch; /* ---------------------------------------------------------------------- SPACING — base 4px, non-linear above 32px so large rhythm stays deliberate ---------------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 12rem; /* Section rhythm. These are PAIRED — consecutive sections contribute both their bottom and the next one's top, so the value here is roughly half the gap a reader actually sees. At the old 9vw cap that was a 260px void between sections on a 1440px screen, which read as unfinished rather than spacious. 6vw gives ~172px: still generous, no longer a hole. */ --sp-section: clamp(3.5rem, 6vw, 6.5rem); --sp-section-tight: clamp(2.25rem, 3.75vw, 4rem); /* ---------------------------------------------------------------------- LAYOUT ---------------------------------------------------------------------- */ --w-content: 1180px; --w-wide: 1440px; --w-text: 68ch; --gutter: clamp(1rem, 4vw, 2.5rem); --gap-col: clamp(1rem, 2vw, 2rem); --gap-row: clamp(1.5rem, 3vw, 3rem); --header-h: 72px; --header-h-compact: 60px; --donatebar-h: 64px; /* mobile sticky donate bar */ /* ---------------------------------------------------------------------- RADII ---------------------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* ---------------------------------------------------------------------- SHADOW — indigo-tinted, never neutral grey ---------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgb(14 19 48 / 0.06); --shadow-2: 0 8px 24px -8px rgb(14 19 48 / 0.14); --shadow-3: 0 24px 60px -20px rgb(14 19 48 / 0.24); --shadow-focus: 0 0 0 3px var(--c-marigold); --ring-offset: 2px; /* ---------------------------------------------------------------------- MOTION ---------------------------------------------------------------------- */ --d-instant: 120ms; --d-fast: 220ms; --d-base: 380ms; --d-slow: 640ms; --d-reveal: 900ms; --d-hero: 1400ms; --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --e-wipe: cubic-bezier(0.76, 0, 0.24, 1); --stagger: 60ms; /* ---------------------------------------------------------------------- Z-INDEX — declared once, no improvised values anywhere ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-donatebar: 200; --z-header: 300; --z-megamenu: 310; --z-mobilenav: 320; --z-quickdonate: 340; --z-modal: 400; --z-cookiebar: 500; --z-curtain: 600; --z-cursor: 700; --z-skiplink: 800; /* ---------------------------------------------------------------------- MOTIF — geometry opacity is a token so "texture, not wallpaper" is enforced ---------------------------------------------------------------------- */ --motif-opacity: 0.06; --motif-opacity-strong: 0.10; --texture-opacity: 0.035; /* Focus */ --focus-width: 3px; --focus-color: var(--c-marigold); /* Mask stencil. Not a colour — an alpha value for mask-image, where opaque means "keep". Tokenised anyway so the hex check stays absolute. */ --mask-opaque: #000000; /* Print — pure black on pure white. Donors print 80G receipts and policy pages; screen tokens waste ink and lose contrast on paper. */ --c-print-bg: #FFFFFF; --c-print-fg: #000000; --fs-print: 11pt; } /* -------------------------------------------------------------------------- REDUCED MOTION — collapse every duration to near-zero at the token level. Individual components need no special-casing for timing; motion.js handles the JS-driven layer separately. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; --d-hero: 1ms; --stagger: 0ms; } }