/* ========================================================================== BEST OF — DESIGN TOKENS Source: design_handoff_homepage/02 - Design tokens.md MD5 51dd021115595b6e72b5a8800aaa0110 Every value below is transcribed verbatim from the pack. Nothing rounded, nothing substituted, nothing converted. LOCK 2: the two golds are separately named on purpose. Credential gold is for things that were EARNED (marks, badges, award artwork, the logo). Action gold is for things you DO (buttons, RISE, primary actions). Using --bo-credential-gold on a control is a bug, not a style choice. ========================================================================== */ :root { /* --- Brand and action ------------------------------------------------- */ /* ⚠ DECISION, 13 Sep 2026 — RULED, NOT MISSED. This #FABD12 gold looks like the same stale-palette drift --bo-navy was (both retired together in Master Rules), but it is not: it's the theme's entire deliberate interactive colour system — buttons, RISE, hover, focus, badges, animations, ~50 real call sites in chrome.css alone, most of them hardcoded literals rather than reading this token. Checked and ruled to STAY. Changing this token alone would be cosmetic (the ~50 hardcoded sites wouldn't move) and re-theming all of them is a full re-theme of the live interactive colour system, not a palette sweep — a separate, explicit decision if it's ever wanted, not something a future pass should "finish" thinking it was overlooked. */ --bo-credential-gold: #FABD12; /* marks, badges, logo ONLY */ --bo-action-gold: #FABD12; /* buttons, RISE, primary actions */ --bo-action-gold-hover: #BD8810; --bo-action-gold-light: #E4A93C; /* borders on gold tinted surfaces */ --bo-gold-ink: #B45309; /* gold family text on light backgrounds */ --bo-gold-ink-deep: #8A5122; /* gold family text needing more contrast */ --bo-gold-ink-darkest: #4A3207; /* text on solid gold fills */ /* ⚠ #0B1F3A → #080C0F, platform-wide stale-palette sweep. --bo-navy-hover is NOT changed here — it's a lighter shade paired with the OLD navy family, and the right hover shade for the new ink is a design call this sweep doesn't make on its own; flagged, not decided. */ --bo-navy: #080C0F; /* verification, formal, footer, dark panels */ --bo-navy-hover: #16324F; --bo-ink: #10213A; /* primary text */ --bo-ink-muted: #4A5260; /* body copy */ --bo-ink-soft: #5F6878; /* meta, captions */ --bo-ink-faint: #8A94A6; /* placeholders, descriptor lines */ --bo-live-green: #2F6B45; /* "live now" states ONLY, never decorative */ /* --- Surfaces ---------------------------------------------------------- */ /* ⛔⛔ MARK, 16 Sep 2026, THIRD TIME BRIEFED: "the background is ivory, not white. The design is white." This value was previously documented here as "transcribed verbatim from the pack" — that documentation was wrong, or read an old/different source; Mark's own direct comparison against the real design is the ground truth, and wins. #FBFAF7 -> #FFFFFF. Two more hardcoded duplicates of the SAME wrong value existed independently in chrome.css (.bo-edition, .bo-home) and needed fixing alongside this token, or the page would have stayed ivory regardless of this change alone. */ --bo-page-bg: #FFFFFF; --bo-page-bg-deep: #EDEAE3; /* mobile viewport surround */ --bo-surface: #FFFFFF; --bo-surface-warm: #FAF7F1; /* Today's edition band, inset panels */ --bo-surface-sunk: #FBFAF7; /* inputs, quoted replies */ /* ONE HAIRLINE: #EDE9E0. Design System v1 retires #E7E2D7 and #E4DFD4, so --bo-border and --bo-border-strong now hold the same value. The two names are kept because call sites distinguish a section divider from a card edge, and a future decision to make dividers heavier again should have to change a value rather than re-invent a name. There is no strong rule any more: section dividers and card borders are the same weight. */ --bo-border: #EDE9E0; /* default */ --bo-border-strong: #EDE9E0; /* section dividers, chrome — now == --bo-border */ /* ⚠ TWO MORE HAIRLINES SURVIVE HERE AND ARE NOT PART OF THE v1 SWEEP. #EAE5DA and #EFE7D8 are not named in the README's retired list, so they were left alone — but "one hairline" means these are drift too. Flagged for a ruling rather than changed silently: collapsing them is a further visual change across every card in the theme. */ --bo-border-soft: #EAE5DA; /* inside cards */ --bo-border-warm: #EFE7D8; /* --- Content family tints --------------------------------------------- Decorative. These identify CONTENT TYPE, never status. */ --bo-indigo-tint: #EEF0FE; --bo-indigo-ink: #312E81; --bo-indigo-border: #DDE0FA; --bo-indigo-panel: #F5F6FF; --bo-gold-tint: #FFF8E7; --bo-gold-tint-ink: #8A5122; --bo-gold-tint-border: #F3E5C9; --bo-gold-panel: #FFFBF2; --bo-amber-tint: #FEF3E2; --bo-amber-ink: #B45309; --bo-amber-border: #F3E5C9; --bo-teal-tint: #E6F6F4; --bo-teal-ink: #0F766E; --bo-teal-border: #CFE9E5; --bo-red-tint: #FDECEC; --bo-red-ink: #B01212; --bo-red-border: #F6D6D6; --bo-rose-tint: #FDEEF4; --bo-rose-ink: #9D174D; --bo-rose-border: #F6D9E5; --bo-purple-tint: #F3E8FF; --bo-purple-ink: #6D28D9; --bo-purple-border: #E5DBF8; --bo-blue-tint: #EAF1FE; --bo-blue-ink: #2563EB; --bo-blue-border: #D3E1FC; --bo-neutral-tint:#F4F1EA; --bo-neutral-ink: #080C0F; --bo-neutral-border: #EDE9E0; --bo-green-tint: #F1F6F1; --bo-green-tint-alt: #F3F8F4; --bo-green-ink: #2F6B45; --bo-green-border: #D2E2D4; /* --- Typography -------------------------------------------------------- Archivo: headings, UI labels, numerals Inter: body UI Source Serif 4: editorial body copy, quoted replies Serif is used for HUMAN text. UI chrome is always sans. */ --bo-font-display: 'Archivo', Helvetica, Arial, sans-serif; --bo-font-ui: 'Inter', Helvetica, Arial, sans-serif; --bo-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* --- Layout ------------------------------------------------------------ */ --bo-content-width: 1240px; --bo-gutter: 24px; --bo-rail-width: 344px; /* Shell - Right Rail's own measured width. == BOG_Right_Rail::W */ --bo-grid-gap: 26px; --bo-header-height: 68px; /* Shell - Header: one tier, inclusive of its hairline. == BOG_Header::HEIGHT */ /* --- Radius ------------------------------------------------------------ */ --bo-radius-card: 4px; /* platform default, deliberately tight */ --bo-radius-control: 10px; /* buttons, inputs, icon tiles */ --bo-radius-sentinel:12px; --bo-radius-pill: 999px; /* --- Shadow ------------------------------------------------------------ */ --bo-shadow-chrome: 0 4px 16px rgba(11,31,58,0.09); --bo-shadow-card-hover: 0 6px 20px rgba(11,31,58,0.08); --bo-shadow-menu: 0 12px 28px rgba(11,31,58,0.16); --bo-shadow-gold-cta: 0 6px 20px rgba(184,136,16,0.28); --bo-shadow-tabbar: 0 -2px 14px rgba(11,31,58,0.08); /* --- Motion ------------------------------------------------------------ */ --bo-transition: 170ms ease; /* --- Hit target -------------------------------------------------------- 44px minimum on EVERY interactive element. Enforced throughout, including the small pills. Check it if you refactor. */ --bo-hit-target: 44px; } /* Named keyframes from doc 02. Declared here so no component redefines them. */ @keyframes bo-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } } @keyframes bo-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } } @keyframes bo-card-ack { 0% { box-shadow:0 0 0 0 rgba(216,162,27,0.55); } 100% { box-shadow:0 0 0 14px rgba(216,162,27,0); } } @keyframes bo-act-pop { 0%,100% { transform:scale(1); } 45% { transform:scale(1.28); } } @keyframes bo-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes bo-card-breathe { 0%,100% { box-shadow:0 0 0 0 rgba(216,162,27,0); } 50% { box-shadow:0 0 26px 0 rgba(216,162,27,0.22); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }