/* ===================================================================
GROW IN UGANDA — Core Design Tokens
Colors + Typography. Import this first in any artifact.
Palette sampled directly from the brand logo (Uganda flag map +
sprout + child silhouette).
=================================================================== */
/* ---- Fonts (Google Fonts substitutions — see README) ----
Load in HTML :
*/
:root {
/* ============ BRAND PALETTE (from logo) ============ */
/* Red — Uganda flag bands. Primary action / urgency / hope. */
--red-700: #9E1010; /* pressed / deep */
--red-600: #C81414; /* logo red — primary brand red */
--red-500: #E11C1C; /* hover-bright */
--red-400: #F23A1E; /* logo flame red accent */
--red-100: #FBE0DC; /* tint surface */
--red-50: #FDF1EF; /* faint wash */
/* Yellow / Gold — flag band & sunlight. Highlights, accents, never body text. */
--yellow-600: #E6A700; /* darker gold for text-on-light if needed */
--yellow-500: #FFC400; /* warm gold — primary yellow */
--yellow-400: #FFDC00; /* logo lemon-gold */
--yellow-100: #FFF3CC; /* tint surface */
--yellow-50: #FFFAEB; /* faint wash */
/* Green — sprout & "Grow in" script. Growth, progress, success, eco. */
--green-700: #1F6310; /* logo deep olive-green / pressed */
--green-600: #2E8A1E; /* primary leaf green */
--green-500: #3FA52A; /* hover-bright */
--green-400: #50A000; /* logo bright leaf */
--green-100: #DFF0D6; /* tint surface */
--green-50: #F0F8EC; /* faint wash */
/* Earth Brown — child silhouette & UGANDA wordmark. Text, grounding, footers. */
--brown-900: #2E1809; /* deepest — strong grounding blocks */
--brown-800: #3C2814; /* logo dark brown */
--brown-700: #4A2614; /* primary text brown */
--brown-600: #643C28; /* secondary text / muted brown */
--brown-400: #8A6A52; /* tertiary / captions */
--brown-200: #D8C7B5; /* hairline on warm surfaces */
/* ============ WARM NEUTRALS (sand/cream, not grey) ============ */
--cream: #FFFBF4; /* page background — warm off-white */
--sand-50: #FDF8F0; /* raised surface */
--sand-100: #F7EFE2; /* subtle panel / alt section */
--sand-200: #EFE3D2; /* card alt / hover fill */
--sand-300: #E3D3BD; /* borders on cream */
--white: #FFFFFF;
/* ============ SEMANTIC ROLES ============ */
--bg: var(--cream);
--bg-alt: var(--sand-100);
--surface: var(--white);
--surface-warm: var(--sand-50);
--fg: var(--brown-700); /* primary text */
--fg-muted: var(--brown-600); /* secondary text */
--fg-subtle: var(--brown-400); /* captions, meta */
--fg-on-dark: #FBF3E8; /* text on brown/red blocks */
--fg-on-dark-mut:#D8C2AD;
--border: var(--sand-300);
--border-strong: var(--brown-200);
--divider: var(--sand-200);
--primary: var(--red-600); /* main CTA: Donér / Bliv fadder */
--primary-hover: var(--red-500);
--primary-press: var(--red-700);
--primary-tint: var(--red-50);
--accent: var(--green-600); /* growth / progress / secondary CTA */
--accent-hover: var(--green-500);
--accent-press: var(--green-700);
--accent-tint: var(--green-50);
--highlight: var(--yellow-500); /* sunlight accents, ratings, badges */
--highlight-tint:var(--yellow-50);
--success: var(--green-600);
--warning: var(--yellow-600);
--danger: var(--red-600);
/* ============ TYPE FAMILIES ============ */
--font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; /* headings — warm, rounded */
--font-body: "Mulish", system-ui, -apple-system, sans-serif; /* body / UI */
--font-script: "Yellowtail", "Brush Script MT", cursive; /* brand flourish only */
/* ============ TYPE SCALE (clamped, responsive) ============ */
--text-xs: 0.75rem; /* 12px — legal, meta */
--text-sm: 0.875rem; /* 14px — captions, labels */
--text-base: 1rem; /* 16px — body */
--text-md: 1.125rem; /* 18px — lead body */
--text-lg: 1.375rem; /* 22px — card titles */
--text-xl: 1.75rem; /* 28px — section titles */
--text-2xl: 2.25rem; /* 36px — page titles */
--text-3xl: clamp(2.5rem, 4vw, 3.25rem); /* 40–52px — hero sub */
--text-4xl: clamp(3rem, 6vw, 4.5rem); /* 48–72px — hero */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal:1.55;
--leading-relaxed:1.7;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-caps: 0.08em;
/* ============ RADII ============ */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px; /* default card / button */
--r-lg: 24px; /* large cards / image frames */
--r-xl: 32px;
--r-pill: 999px;
/* ============ SHADOWS (warm-tinted, soft) ============ */
--shadow-xs: 0 1px 2px rgba(46, 24, 9, 0.06);
--shadow-sm: 0 2px 8px rgba(46, 24, 9, 0.08);
--shadow-md: 0 8px 24px rgba(46, 24, 9, 0.10);
--shadow-lg: 0 18px 48px rgba(46, 24, 9, 0.14);
--shadow-cta: 0 8px 20px rgba(200, 20, 20, 0.28); /* red CTA glow */
/* ============ SPACING (8px base) ============ */
--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: 96px;
--space-10: 128px;
--container: 1200px;
--container-narrow: 760px;
}
/* ===================================================================
SEMANTIC ELEMENT DEFAULTS
=================================================================== */
.gu-body, body.gu {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.gu h1, .gu-h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-2xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--brown-800);
text-wrap: balance;
}
.gu h2, .gu-h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--brown-800);
text-wrap: balance;
}
.gu h3, .gu-h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--brown-700);
}
.gu-display {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-4xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--brown-800);
text-wrap: balance;
}
.gu-script {
font-family: var(--font-script);
font-weight: 400;
color: var(--green-600);
line-height: 1;
}
.gu p, .gu-p {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--fg-muted);
text-wrap: pretty;
}
.gu-lead {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--fg-muted);
}
.gu-eyebrow {
font-family: var(--font-body);
font-weight: 800;
font-size: var(--text-sm);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--green-600);
}
.gu-caption {
font-size: var(--text-sm);
color: var(--fg-subtle);
}
.gu-small {
font-size: var(--text-xs);
color: var(--fg-subtle);
}