/* ========================================================================== Wake family brand kit: tokens.css (v1.1, 2026-09-30, Integration Round 1) Shared by Wake the Bear, Wake the Woke Policy, Wake the Bench and Wake the Nation. Doc (drmonopoly.org) gets an accent slot + palette tokens ONLY (see README: Doc is never part of the shared family nav/footer). Every value here comes from, or grows out of, the live wakethebearca.org stylesheet. Legacy names are noted as "site:" so you can map them 1:1. Contrast ratios are WCAG 2.x, measured against --wake-color-bg (#0d0b09) unless noted. Full table: README.md. AA = 4.5:1 text, 3:1 large text / UI. Default = light text on dark (the current site). Set the sub-brand on any ancestor, usually : ========================================================================== */ :root { /* ---- Palette primitives (don't use these directly in components) ------ */ --wake-night: #0d0b09; /* site: theme-color, button ink */ --wake-den: #15110c; /* site: tooltip bg */ --wake-bark: #2b2113; /* site: dropdown bg */ --wake-seal: #5C462B; /* site: --bg-color / --seal-brown */ --wake-maple: #B58150; /* site: --accent-color / --maple-sugar. FILL + BORDER ONLY */ --wake-honey: #D9A441; /* site: CTA gradient stop */ --wake-gold: #F2C13D; /* site: --accent-text */ --wake-sand: #D5C4A8; /* site: --label-text */ --wake-white: #FFFFFF; /* site: --text-color */ --wake-flag-red: #BA0C2F; /* site: --old-glory-red. Decorative fill (mark bar, rules); 2.98:1 vs bg */ --wake-flag-red-hi: #D41035; /* site: red hover. Woke fill; 3.67:1 vs bg */ --wake-coral: #FF6B6B; /* site: .wnw-lbl-woke (red, text-safe) */ --wake-green: #4ADE80; /* site: .wnw-lbl-wake / grade A */ --wake-sky: #9CC2FF; /* NEW: Bench accent (text-safe) */ --wake-lake: #3366B3; /* NEW: Bench fill */ --wake-tide: #A8D8D8; /* R1: Nation silver-teal (from Nation's test copy, nation-override.css) */ --wake-deep-teal: #246E6E; /* R1: Nation fill */ --wake-lilac: #CBB2FF; /* R1: Doc violet (text-safe on dark) */ --wake-violet: #7A4FD1; /* R1: Doc fill */ --wake-violet-deep: #5B2EA6; /* R1: Doc accent on light paper (Doc's own light pages) */ /* ---- Semantic colours: surfaces --------------------------------------- */ --wake-color-bg: var(--wake-night); /* page background */ --wake-color-surface: var(--wake-den); /* cards, panels */ --wake-color-surface-raised: var(--wake-bark); /* menus, popovers */ --wake-color-field: var(--wake-seal); /* warm brown section band */ --wake-color-border: rgba(255,255,255,0.20); /* site: --border-color (decorative) */ --wake-color-border-strong: var(--wake-maple); /* 5.82:1, OK for UI edges */ --wake-color-tint: rgba(181,129,80,0.10); /* site: --secondary-bg */ /* ---- Semantic colours: text (all AA on bg, surface, raised AND field) - */ --wake-color-text: var(--wake-white); /* 19.65 bg | 18.79 surface | 15.79 raised | 8.88 field */ --wake-color-text-muted: #C9C0B3; /* 10.92 | 10.45 | 8.78 | 4.93 (replaces rgba(255,255,255,.55-.66)) */ --wake-color-text-label: var(--wake-sand); /* 11.50 | 11.00 | 9.24 | 5.19 eyebrows, metadata; never clickable */ --wake-color-link: var(--wake-gold); /* 11.67 | 11.16 | 9.38 | 5.27 gold = "click this" */ --wake-color-link-hover: var(--wake-white); --wake-color-danger-text: var(--wake-coral); /* 7.08 | 6.77 | 5.69 | (3.20 field: large text only) */ --wake-color-success-text:var(--wake-green); /* 11.27 | 10.79 | 9.06 | 5.09 */ /* ---- Sub-brand accents ------------------------------------------------- -text : safe for type on dark surfaces -fill : backgrounds for buttons / chips -ink : the text colour to use ON the fill */ --wake-accent-bear: var(--wake-gold); /* "Bear Gold" 11.67:1 on bg */ --wake-accent-bear-fill: var(--wake-honey); /* 8.73:1 vs bg */ --wake-accent-bear-ink: #1A1205; /* 8.24:1 on honey */ --wake-accent-woke: var(--wake-coral); /* "Flag Red" 7.08:1 on bg; 3.20 on field = large text only */ --wake-accent-woke-fill: var(--wake-flag-red-hi); /* 3.67:1 vs bg (flag red #BA0C2F is only 2.98) */ --wake-accent-woke-ink: #FFFFFF; /* 5.35:1 on #D41035 */ --wake-accent-bench: var(--wake-sky); /* "Bench Blue" 10.83:1 on bg */ --wake-accent-bench-fill: var(--wake-lake); /* 3.45:1 vs bg */ --wake-accent-bench-ink: #FFFFFF; /* 5.69:1 on lake */ /* Nation: reserved slot. Name + domain NOT decided; the kit carries no Nation URL. */ --wake-accent-nation: var(--wake-tide); /* "Nation Teal" 12.61:1 on bg; 5.70 on field */ --wake-accent-nation-fill: var(--wake-deep-teal); /* 3.30:1 vs bg (UI) */ --wake-accent-nation-ink: #FFFFFF; /* 5.95:1 on deep teal */ /* Candidate (Wake the Candidate, down-ballot campaign assistant). 2026-10-09 */ --wake-accent-candidate: #86D9A6; /* 11.68:1 on bg (matches kit) */ --wake-accent-candidate-fill: #2F8F5B; /* 4.87:1 vs bg */ --wake-accent-candidate-ink: #06140C; /* 4.67:1 on fill */ /* Doc (drmonopoly.org, PAC-sponsored): accent + palette tokens ONLY. 2026-10-09: Clay added "Wake the Doc" to the family header bar (last, after Candidate). Doc's live site uses oxblood #8d1c13 on paper; that is 2.16:1 on the kit's dark bg and reads as Woke red, so the kit slot is a distinct violet. */ --wake-accent-doc: var(--wake-lilac); /* "Doc Violet" 10.62:1 on bg; 4.80 on field */ --wake-accent-doc-fill: var(--wake-violet); /* 3.62:1 vs bg (UI) */ --wake-accent-doc-ink: #FFFFFF; /* 5.43:1 on violet */ --wake-accent-doc-on-paper: var(--wake-violet-deep); /* 8.08:1 on Doc paper #f8f5ee */ /* Active accent: Bear by default; switched by [data-wake-brand] below */ --wake-accent: var(--wake-accent-bear); --wake-accent-fill: var(--wake-accent-bear-fill); --wake-accent-ink: var(--wake-accent-bear-ink); /* ---- Grade colours (colour is never the only cue; see badges.css) ---- */ --wake-grade-ink: #1A1205; /* site: .wnw-grade-letter colour */ --wake-grade-a: var(--wake-green); /* ink 10.64:1 | shape: circle */ --wake-grade-c: var(--wake-honey); /* ink 8.24:1 | shape: rounded square */ --wake-grade-f: #EF4444; /* ink 4.93:1 | shape: octagon, hatched rim */ --wake-grade-f-hatch: #B91C1C; --wake-grade-none-fill: #1F1B17; /* shape: dashed outline */ --wake-grade-none-ink: var(--wake-sand); /* 10.01:1 on none-fill */ /* ---- Focus ring (site: 3px solid --accent-text, offset 2px) ---------- */ --wake-focus-color: var(--wake-gold); /* 11.67:1 vs bg, 5.27:1 vs field */ --wake-focus-width: 3px; --wake-focus-offset: 2px; --wake-focus-ring: var(--wake-focus-width) solid var(--wake-focus-color); /* ---- Type: free, self-hostable (SIL OFL 1.1) + system fallbacks ------ Montserrat = display / labels (uppercase, tracked). Poppins = body. Both ship as woff2 in ./fonts (see fonts.css). Without them the system stacks below render cleanly; nothing depends on a font CDN. */ --wake-font-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --wake-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wake-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --wake-fw-body: 400; --wake-fw-medium: 500; --wake-fw-bold: 600; --wake-fw-strong: 700; /* ceiling: 800/900 read as shouting */ /* Fluid scale, named by PURPOSE (site: --fs-*). Floor is --wake-fs-micro. */ --wake-ui-scale: 1; --wake-fs-micro: calc(clamp(0.80rem, 0.77rem + 0.14vw, 0.86rem) * var(--wake-ui-scale)); --wake-fs-caption: calc(clamp(0.87rem, 0.83rem + 0.18vw, 0.94rem) * var(--wake-ui-scale)); --wake-fs-label: calc(clamp(0.93rem, 0.89rem + 0.20vw, 1.01rem) * var(--wake-ui-scale)); --wake-fs-small: calc(clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem) * var(--wake-ui-scale)); --wake-fs-body: calc(clamp(1.08rem, 1.03rem + 0.24vw, 1.18rem) * var(--wake-ui-scale)); --wake-fs-body-lg: calc(clamp(1.18rem, 1.12rem + 0.30vw, 1.32rem) * var(--wake-ui-scale)); --wake-fs-h5: calc(clamp(1.28rem, 1.20rem + 0.38vw, 1.46rem) * var(--wake-ui-scale)); --wake-fs-h4: calc(clamp(1.46rem, 1.33rem + 0.62vw, 1.78rem) * var(--wake-ui-scale)); --wake-fs-h3: calc(clamp(1.72rem, 1.51rem + 1.00vw, 2.22rem) * var(--wake-ui-scale)); --wake-fs-h2: calc(clamp(2.05rem, 1.72rem + 1.55vw, 2.85rem) * var(--wake-ui-scale)); --wake-fs-h1: calc(clamp(2.45rem, 1.95rem + 2.35vw, 3.65rem) * var(--wake-ui-scale)); --wake-fs-display: calc(clamp(3.10rem, 2.10rem + 4.70vw, 5.50rem) * var(--wake-ui-scale)); --wake-lh-tight: 1.08; /* display, h1 */ --wake-lh-snug: 1.3; /* headings, UI */ --wake-lh-body: 1.7; /* site body */ --wake-track-display: -0.05em; /* site hero / brand-h1 */ --wake-track-tight: 0.10em; --wake-track-label: 0.12em; --wake-track-wide: 0.15em; --wake-track-eyebrow: 0.20em; /* ---- Spacing (site: --sp-1..8, plus one larger step) ----------------- */ --wake-space-1: 4px; --wake-space-2: 8px; --wake-space-3: 12px; --wake-space-4: 16px; --wake-space-5: 22px; --wake-space-6: 30px; --wake-space-7: 40px; --wake-space-8: 56px; --wake-space-9: 80px; /* ---- Radii (collapsed from the site's 15 values to 7) ---------------- */ --wake-radius-xs: 3px; /* tags, year badges */ --wake-radius-sm: 4px; /* buttons */ --wake-radius-md: 8px; /* inputs, cards */ --wake-radius-grade: 9px; /* grade tile */ --wake-radius-lg: 12px; /* panels, legends */ --wake-radius-xl: 20px; --wake-radius-pill: 999px; /* ---- Shadows (dark UI: shadows are deep and soft) -------------------- */ --wake-shadow-sm: 0 2px 6px rgba(0,0,0,0.25); --wake-shadow-md: 0 6px 20px rgba(0,0,0,0.40); --wake-shadow-lg: 0 18px 44px rgba(0,0,0,0.60); --wake-shadow-glow: 0 10px 24px rgba(217,164,65,0.40); /* primary CTA hover */ /* ---- Motion + layout ------------------------------------------------- */ --wake-ease: cubic-bezier(0.16, 1, 0.3, 1); --wake-dur-fast: 150ms; --wake-dur: 300ms; --wake-measure: 72ch; --wake-container: 1200px; --wake-header-h: 64px; } /* ---- Sub-brand switch ---------------------------------------------------- */ [data-wake-brand="bear"] { --wake-accent: var(--wake-accent-bear); --wake-accent-fill: var(--wake-accent-bear-fill); --wake-accent-ink: var(--wake-accent-bear-ink); } [data-wake-brand="woke"] { --wake-accent: var(--wake-accent-woke); --wake-accent-fill: var(--wake-accent-woke-fill); --wake-accent-ink: var(--wake-accent-woke-ink); } [data-wake-brand="bench"] { --wake-accent: var(--wake-accent-bench); --wake-accent-fill: var(--wake-accent-bench-fill); --wake-accent-ink: var(--wake-accent-bench-ink); } [data-wake-brand="nation"]{ --wake-accent: var(--wake-accent-nation);--wake-accent-fill: var(--wake-accent-nation-fill);--wake-accent-ink: var(--wake-accent-nation-ink); } [data-wake-brand="doc"] { --wake-accent: var(--wake-accent-doc); --wake-accent-fill: var(--wake-accent-doc-fill); --wake-accent-ink: var(--wake-accent-doc-ink); } @media (prefers-reduced-motion: reduce) { :root { --wake-dur-fast: 0ms; --wake-dur: 0ms; } }