/* =====================================================================
AUNM — American Unity National Monument · Design tokens v1.0
Elevated brand system (2026-11-14). Drop-in: load AFTER the fonts and
BEFORE site.css, or after it to override. The "Prototype aliases"
block at the bottom maps every variable site.css already uses, so the
current prototype picks the new system up with no class changes.
Fonts (Google Fonts, SIL Open Font License — free for web):
===================================================================== */
:root {
/* ---------- 1. COLOR PRIMITIVES -------------------------------------
Sampled from the AUNM oval logo (flag navy, Old Glory red, the ochre
and cream skin tones, the slate-blue headscarf) and the book (cream
paper, navy panels, gold numerals), then tuned for screen + AA. */
/* Night navy — the logo's field of stars */
--aunm-navy-950: #08121f; /* deepest: footer, video letterbox */
--aunm-navy-900: #0e1d33; /* "Night" — hero overlays, primary dark */
--aunm-navy-800: #17283e; /* "Panel" — the book's navy band */
--aunm-navy-700: #22385a; /* raised dark surface, hover on dark */
--aunm-navy-600: #34507a;
--aunm-slate-500: #4f6c90; /* "Dusk slate" — logo headscarf blue */
--aunm-slate-300: #9aa6b8; /* muted text on navy */
--aunm-slate-100: #c9cfd9; /* body text on navy */
/* Prairie gold — the book's numerals, the ochre in the logo */
--aunm-gold-700: #7d5a24; /* gold TEXT on cream (AA 5.5:1) */
--aunm-gold-600: #9a7031;
--aunm-gold-500: #b8894a; /* "Prairie gold" — rules, icons, fills (decorative only on cream) */
--aunm-gold-300: #d6b273; /* "Lamplight" — gold text on navy (AA 7.4:1+) */
--aunm-gold-100: #f2e0b8; /* "Cream gold" — italic subtitles on dark */
/* Paper — the book's pages, warmed */
--aunm-paper-50: #fbf8f1; /* lifted card on paper */
--aunm-paper-100: #f6f1e6; /* "Paper" — page background */
--aunm-paper-200: #efe8d8; /* "Bone" — alternate band, image placeholder */
--aunm-paper-300: #e2d8c3; /* hairline-strong, input borders */
/* Ink + granite — Black Hills stone neutrals */
--aunm-ink-900: #14223a; /* body text on paper (14:1) */
--aunm-ink-600: #4a5263; /* secondary text (7:1) */
--aunm-ink-500: #5c6478; /* captions, meta (AA on bone) */
--aunm-granite: #8b8478; /* stone texture tone, disabled */
/* Old Glory red — accent only, never a large field */
--aunm-red-700: #9e2a31; /* text/links-hover, focus on paper (6.6:1) */
--aunm-red-500: #b5323a; /* logo stripe red; tiny accents */
/* ---------- 2. SEMANTIC COLOR ------------------------------------- */
--c-bg: var(--aunm-paper-100);
--c-bg-alt: var(--aunm-paper-200);
--c-surface: var(--aunm-paper-50);
--c-text: var(--aunm-ink-900);
--c-text-soft: var(--aunm-ink-600);
--c-text-meta: var(--aunm-ink-500);
--c-accent: var(--aunm-gold-700); /* gold you can read */
--c-accent-deco: var(--aunm-gold-500); /* gold you look at */
--c-emphasis: var(--aunm-red-700);
--c-rule: rgba(20, 34, 58, .14);
--c-rule-strong: rgba(20, 34, 58, .28);
--c-focus: var(--aunm-red-700);
--c-dark-bg: var(--aunm-navy-800);
--c-dark-bg-deep: var(--aunm-navy-900);
--c-dark-text: #eef0f4;
--c-dark-text-soft:var(--aunm-slate-100);
--c-dark-meta: var(--aunm-slate-300);
--c-dark-accent: var(--aunm-gold-300);
--c-dark-rule: rgba(214, 178, 115, .28);
--c-dark-focus: var(--aunm-gold-300);
/* Image overlays (hero legibility; tuned to keep sky color alive) */
--overlay-hero: linear-gradient(to top, rgba(8,18,31,.88) 0%, rgba(8,18,31,.42) 38%, rgba(8,18,31,0) 66%),
linear-gradient(to bottom, rgba(8,18,31,.45), rgba(8,18,31,0) 20%);
--overlay-band: linear-gradient(to bottom, var(--aunm-navy-800) 0%, rgba(23,40,62,.0) 100%);
--overlay-dusk: linear-gradient(180deg, rgba(79,108,144,.0) 30%, rgba(14,29,51,.55) 100%);
/* ---------- 3. TYPOGRAPHY ----------------------------------------
Newsreader — a variable text/display serif with an optical-size
axis: cut sharp and high-contrast at display sizes, sturdy at body
sizes. Feels like an engraved dedication, reads like a fine book.
Public Sans — the open-source typeface of the U.S. Web Design
System: neutral, civic, quietly federal. Labels, UI, body. */
--font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-text: "Newsreader", Georgia, serif; /* long-form reading, quotes */
--font-sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
/* Fluid scale: 1.2 at 360px → 1.333 at 1440px, body 17 → 19px.
Names describe role, not size, so pages stay consistent. */
--fs-micro: 0.75rem; /* 12 — legal, credits */
--fs-label: 0.78rem; /* 12.5 — eyebrows (caps, tracked) */
--fs-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);/* 14–15 — captions */
--fs-body: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);/* 17–19 */
--fs-lede: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem); /* 20–26 — serif italic intro */
--fs-h4: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem); /* 20–24 */
--fs-h3: clamp(1.5rem, 1.3rem + 0.85vw, 2.125rem); /* 24–34 */
--fs-h2: clamp(2rem, 1.55rem + 1.95vw, 3.5rem); /* 32–56 */
--fs-h1: clamp(2.75rem, 1.9rem + 3.7vw, 5.75rem); /* 44–92 */
--fs-display: clamp(3.25rem, 1.8rem + 6.4vw, 8.5rem); /* 52–136 — statements */
--fs-numeral: clamp(4.5rem, 2.4rem + 9vw, 11rem); /* 72–176 — section numerals */
--fs-stat: clamp(3rem, 2rem + 4.2vw, 6rem); /* 48–96 — count-ups */
--lh-tight: 1.02;
--lh-snug: 1.15;
--lh-heading: 1.2;
--lh-body: 1.62;
--lh-loose: 1.8;
--wt-light: 300;
--wt-regular: 400;
--wt-medium: 500;
--wt-semi: 600;
--wt-bold: 700;
--track-display: -0.018em; /* big serif tightens */
--track-heading: -0.008em;
--track-body: 0;
--track-label: 0.24em; /* spaced caps eyebrows */
--track-inscription: 0.32em;/* engraved-caps lines (serif) */
--measure: 34em; /* body text column, ~68 chars */
--measure-wide: 42em;
--measure-tight: 22em; /* lede / pull quotes */
/* ---------- 4. SPACE — 4px base, 8px rhythm ----------------------- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.5rem; /* 24 */
--space-6: 2rem; /* 32 */
--space-7: 3rem; /* 48 */
--space-8: 4rem; /* 64 */
--space-9: 6rem; /* 96 */
--space-10: 8rem; /* 128 */
/* Fluid section rhythm (vertical breathing between chapters) */
--section-s: clamp(4rem, 3rem + 4vw, 7rem); /* 64–112 */
--section-m: clamp(5.5rem, 3.5rem + 7vw, 10rem); /* 88–160 */
--section-l: clamp(7rem, 4rem + 12vw, 15rem); /* 112–240 — statements */
--stack-text: 1.1em; /* paragraph spacing */
/* ---------- 5. GRID ---------------------------------------------- */
--grid-cols: 12;
--gutter: clamp(16px, 4vw, 64px); /* page side margin (16px on phones) */
--grid-gap: clamp(16px, 2.2vw, 32px); /* column gap */
--max: 1280px; /* content max */
--max-text: 760px; /* reading column */
--max-wide: 1520px; /* full-bleed-ish media */
--bar-h: clamp(64px, 6.5vw, 88px);
/* ---------- 6. SHAPE, LINE, DEPTH -------------------------------- */
--radius-0: 0; /* default: memorial architecture is square-cut */
--radius-1: 2px; /* inputs, chips */
--radius-pill: 999px; /* only the scroll cue + audio toggle */
--line-w: 1px;
--rule-gold: 1px solid var(--c-accent-deco);
--shadow-1: 0 1px 0 var(--c-rule);
--shadow-2: 0 18px 40px -24px rgba(8, 18, 31, .35); /* lifted card on hover */
--shadow-3: 0 40px 80px -40px rgba(8, 18, 31, .55); /* floating media */
/* ---------- 7. MOTION -------------------------------------------- */
--ease-out: cubic-bezier(.22, .61, .36, 1); /* default */
--ease-silk: cubic-bezier(.16, 1, .3, 1); /* reveals, long fades */
--ease-inout: cubic-bezier(.65, 0, .35, 1); /* curtains, wipes */
--dur-1: 180ms; /* hover color */
--dur-2: 400ms; /* buttons, underline draw */
--dur-3: 800ms; /* text rise */
--dur-4: 1400ms; /* image reveal, rule draw */
--dur-5: 2600ms; /* hero arrival, ken-burns start */
--stagger: 90ms;
--rise: 28px; /* distance text travels on reveal */
/* ---------- 8. ICONS -------------------------------------------- */
--icon-s: 20px;
--icon-m: 28px;
--icon-l: 44px;
--icon-stroke: 1.25; /* fine engraved line; 1.5 under 24px */
/* ---------- 9. LAYERS ------------------------------------------- */
--z-base: 0; --z-raised: 2; --z-sticky: 10; --z-bar: 20; --z-modal: 40; --z-veil: 50;
color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms;
--stagger: 0ms; --rise: 0px;
}
}
/* ---------- Prototype aliases (site.css variable names) -------------
Lets prototype/assets/site.css adopt the system untouched. */
:root {
--paper: var(--aunm-paper-100);
--paper-2: var(--aunm-paper-200);
--navy: var(--aunm-navy-800);
--navy-2: var(--aunm-navy-900);
--ink: var(--aunm-ink-900);
--ink-soft:var(--aunm-ink-600);
--gold: var(--aunm-gold-700);
--gold-lt: var(--aunm-gold-300);
--red: var(--aunm-red-700);
--slate: var(--aunm-slate-500);
--hair: var(--c-rule);
--veil: rgba(246, 241, 230, .97);
--serif: var(--font-display);
--sans: var(--font-sans);
--ease: var(--ease-out);
}