/* ============================================================================ CRUMBLEDROP DESIGN TOKENS v1.0-locked Source of truth: crumbledrop-homepage-FINAL-v8.html Supersedes: 8 CSS Design Decisions v2.2 Decision 2, homepage v5 tokens. Every text pairing here is verified against WCAG 2.1 AA. ========================================================================== */ /* ---- @font-face. Must sit above :root. ----------------------------------- Two families only. Self-hosted woff2. Paths are relative to this file: tokens.css lives at /assets/css/, fonts at /assets/fonts/. HARD BLOCKER before launch: the two *-fallback faces below still carry PLACEHOLDER metrics. Run the real woff2 files through fontpie or the Fontaine CLI and replace the three numbers in each block. Guessed metrics can make CLS worse than no override at all. -------------------------------------------------------------------------*/ @font-face{ font-family:'Frank Ruhl Libre Fallback'; src:local('Georgia'), local('Times New Roman'); size-adjust:100%; /* TODO replace with measured value */ ascent-override:90%; /* TODO replace with measured value */ descent-override:24%; /* TODO replace with measured value */ line-gap-override:0%; } @font-face{ font-family:'Plus Jakarta Sans Fallback'; src:local('Arial'), local('Helvetica Neue'); size-adjust:100%; /* TODO replace with measured value */ ascent-override:96%; /* TODO replace with measured value */ descent-override:24%; /* TODO replace with measured value */ line-gap-override:0%; } @font-face{font-family:'Frank Ruhl Libre';src:url('../fonts/frank-ruhl-libre-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Frank Ruhl Libre';src:url('../fonts/frank-ruhl-libre-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;} :root{ /* ---- INK FAMILY ------------------------------------------------------- ink primary text 18.86:1 on white ink-soft secondary body copy 6.41:1 on white ink-faint small caps + captions 4.79:1 on white ink-mute NON-TEXT ONLY 3.29:1. Never on a text node. (#9A8B80 was previously used for 10px labels. That failed.) ---------------------------------------------------------------------- */ --color-ink: #16100C; --color-ink-soft: #6B5C52; --color-ink-faint: #7D7066; --color-ink-mute: #9A8B80; /* ---- SURFACES --------------------------------------------------------- */ --color-bg: #FFFFFF; --color-bg-tint: #FBF8F6; --color-surface-dark: #2B1B12; --color-surface-dark-2: #1C0F08; --color-text-invert: #FFF9F5; /* ---- ROSE ACCENT ------------------------------------------------------ accent fills, and text on dark only. NOT text-safe on white. accent-deep the text-safe rose. Links, logo em, focus ring. accent-light rose text / focus ring on dark surfaces only. ---------------------------------------------------------------------- */ --color-accent: #E4738E; --color-accent-hover: #EE879F; --color-accent-deep: #A83C57; --color-accent-pale: #FBDFE8; --color-accent-light: #F2A9BA; /* ---- LINES ------------------------------------------------------------ -line / -line-strong DECORATIVE ONLY. Below 3:1 by design. Allowed only where the component is identified by its content. -line-ui INTERACTIVE. Ghost buttons, inputs, any control whose border is the only thing naming it. 3.10:1. ---------------------------------------------------------------------- */ --color-line: rgba(22,16,12,.10); --color-line-strong: rgba(22,16,12,.22); --color-line-ui: #9E9084; --color-line-invert: rgba(255,249,245,.18); --color-line-invert-ui: rgba(255,249,245,.38); --color-placeholder-invert: rgba(255,249,245,.55); /* ---- FOCUS ------------------------------------------------------------ */ --color-focus-ring: #A83C57; --color-focus-ring-invert: #F2A9BA; --color-focus-halo: #FFFFFF; --focus-ring-width: 3px; --focus-ring-offset: 3px; /* ---- STATUS (next-week confidence labels) ----------------------------- */ --color-status-confirmed: var(--color-accent); --color-status-rumor: var(--color-accent-light); --color-status-speculation:rgba(255,249,245,.68); /* ---- PER-FLAVOR CONTRACT ---------------------------------------------- Root values are the STUB FALLBACK. Every card overrides all three inline. A card that inherits these renders as deliberate warm beige, not broken. ---------------------------------------------------------------------- */ --flavor-color: #D8C4AE; --on: #16100C; --on-inv: #FFFFFF; /* ---- ALPHA LADDER ----------------------------------------------------- Percentages, not colours, on purpose. A :root custom property holding color-mix(... var(--on) ...) would be substituted against the ROOT --on and then inherit the wrong colour into every card. Percentages inherit safely and var(--on) resolves on the card itself. Calibrated so any fill meeting the >=7:1 guard rail keeps every rung above its WCAG threshold. ---------------------------------------------------------------------- */ --on-a-body: 90%; /* 18px descriptor needs 4.5:1 */ --on-a-label: 80%; /* 10-12px uppercase labels needs 4.5:1 */ --on-a-border: 70%; /* ghost button border needs 3:1 */ --on-a-hairline: 60%; /* rules, empty stars needs 3:1 */ /* ---- TYPE ------------------------------------------------------------- */ --font-display:'Frank Ruhl Libre','Frank Ruhl Libre Fallback',Georgia,serif; --font-body:'Plus Jakarta Sans','Plus Jakarta Sans Fallback',system-ui,-apple-system,sans-serif; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-title: clamp(1.875rem,4vw,2.875rem); --text-flavor:clamp(2rem,4.4vw,3.375rem); --text-hero: clamp(2.75rem,6vw,4.9rem); --track-label:.16em; --track-flavor:-.035em; /* ---- SPACE / RADIUS / SHADOW / LAYOUT --------------------------------- */ --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px; --space-section:clamp(80px,9vw,128px); --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:9999px; --shadow-sm:0 1px 2px rgba(22,16,12,.04), 0 2px 8px rgba(22,16,12,.05); --shadow-md:0 2px 4px rgba(22,16,12,.04), 0 10px 24px rgba(22,16,12,.07), 0 24px 52px rgba(22,16,12,.06); --container-max:1360px; --gutter:clamp(16px,2.4vw,40px); --z-header:100; }