/* * ══════════════════════════════════════════════════════════ * BRANDING.CSS — Annie Nidzieko Teaching Portfolio * ══════════════════════════════════════════════════════════ * * Design tokens: colors, typography, spacing, shadows, motion. * Update this file to rebrand without touching component styles. * * Fonts loaded via in for performance: * — Cormorant Garamond (display / headings) * — Nunito (body / UI) * * ══════════════════════════════════════════════════════════ */ :root { /* ────────────────────────────────────────── BACKGROUNDS ────────────────────────────────────────── */ --bg: #FDFAF6; /* Warm cream — primary background */ --bg-alt: #F5EFE7; /* Light sand — alternate sections */ --bg-sage: #EDF3ED; /* Pale sage — cards / highlights */ --bg-blue: #EBF4F7; /* Pale sky — accent backgrounds */ /* ────────────────────────────────────────── TEXT ────────────────────────────────────────── */ --text: #2C2926; /* Near-black warm — primary text */ --text-mid: #58534E; /* Warm gray — body / secondary */ --text-light: #8C8580; /* Muted warm — captions, labels */ /* ────────────────────────────────────────── BRAND PALETTE ────────────────────────────────────────── */ /* Sage green — primary brand color */ --sage: #6B8F6F; --sage-dark: #4A6B4E; /* Hover / emphasis */ --sage-light: #C4DBCA; /* Borders, light accents */ /* Sky blue — secondary brand color */ --blue: #5B9AA8; --blue-light: #B4D4DC; /* Borders, light accents */ /* Coral — warm accent */ --coral: #D4755C; --coral-light: #F0C4B4; /* Icon backgrounds */ /* Gold — supporting accent */ --gold: #C9A86E; /* Neutral sand */ --sand: #E5D9CB; --white: #FFFFFF; /* ────────────────────────────────────────── TYPOGRAPHY ────────────────────────────────────────── */ --ff-display: 'Cormorant Garamond', Georgia, serif; --ff-body: 'Nunito', system-ui, sans-serif; /* ────────────────────────────────────────── LAYOUT ────────────────────────────────────────── */ --nav-h: 72px; --pad-x: clamp(20px, 5vw, 64px); --pad-section: clamp(72px, 9vw, 128px); --r: 12px; /* Standard border-radius */ --r-lg: 24px; /* Large border-radius */ /* ────────────────────────────────────────── SHADOWS ────────────────────────────────────────── */ --sh-sm: 0 2px 12px rgba(44, 41, 38, .08); --sh-md: 0 8px 32px rgba(44, 41, 38, .12); --sh-lg: 0 20px 56px rgba(44, 41, 38, .16); /* ────────────────────────────────────────── MOTION ────────────────────────────────────────── */ --ease: 0.35s cubic-bezier(.4, 0, .2, 1); }