/* ========================================================================== Design Tokens — Ulemavu Research Institute Palette below is pulled directly from the site's real style.css: brand red #ed1b24, brand blue #00adef, near-black footer #0b0c11, nav-toggle hover #303841, white body background. ========================================================================== */ :root { /* ---- Color: brand ---- */ --color-ink: #0B0C11; /* near-black — footer bg, headings on light */ --color-ink-80: #303841; /* dark hover state, from original nav-toggle hover */ --color-teal: #00ADEF; /* brand blue — top bar bg, links, secondary buttons */ --color-teal-dark: #0089BD; /* hover / pressed state for blue */ --color-amber: #ED1B24; /* brand red — primary accent, CTAs, icon highlights */ --color-amber-dark: #C81620; --color-amber-light: #FF4550; /* AA-safe red for small text on dark backgrounds */ /* ---- Color: neutrals ---- */ --color-white: #FFFFFF; --color-sand: #F7F4EE; /* alternate section background (new, neutral) */ --color-slate: #33383D; /* body text */ --color-slate-mute: #6B7480; /* secondary / muted text */ --color-border: #E3E0D8; /* ---- Color: semantic ---- */ --color-focus: #ED1B24; --color-link: var(--color-amber-dark); --color-link-hover: #A11119; /* ---- Typography ---- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-dyslexic: 'Atkinson Hyperlegible', 'Inter', sans-serif; --fs-body: 1.125rem; /* 18px */ --lh-body: 1.7; --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem); --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); --fs-h3: clamp(1.375rem, 1.5vw + 1rem, 1.75rem); --fs-eyebrow: 0.8125rem; --measure: 70ch; /* max paragraph width */ /* ---- Spacing ---- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 8rem; /* ---- Shape / elevation ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --shadow-sm: 0 1px 3px rgba(15, 42, 61, 0.08); --shadow-md: 0 8px 24px rgba(15, 42, 61, 0.10); --shadow-lg: 0 16px 48px rgba(15, 42, 61, 0.14); --transition: 200ms ease; --max-width: 1200px; } /* ---- Accessibility toolbar: state overrides on ---- */ html[data-a11y-contrast="high"] { --color-slate: #000000; --color-ink: #000000; --color-sand: #FFFFFF; --color-border: #000000; --color-link: #00343A; } html[data-a11y-theme="dark"] { --color-white: #12181D; --color-sand: #1A2126; --color-ink: #F3F1EA; --color-slate: #E7E3D9; --color-slate-mute: #B7B2A6; --color-border: #33393F; } html[data-a11y-grayscale="true"] { filter: grayscale(1); } html[data-a11y-font="dyslexic"] body { font-family: var(--font-dyslexic); } html[data-a11y-pause-animations="true"] * { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } html[data-a11y-hide-images="true"] img:not(.a11y-keep) { visibility: hidden; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }