/* ========================================================================== ForemanCalc — tokens.css Source of truth: ForemanCalc.dc.html. Load first, before base.css. ========================================================================== */ :root { /* ---- Color: neutrals ---- */ --fc-bg: #F7F7F5; /* page background */ --fc-surface: #FFFFFF; /* cards, header, footer */ --fc-border: #E4E4DF; /* card and divider lines (decorative) */ --fc-border-strong: #C9C9C2; /* dashed empty-state and ad-slot outline */ --fc-border-field: #868C93; /* input, select boundary (3.4:1 on white) */ --fc-placeholder-fill: #F0F0EC; /* image placeholders, ad-slot stripe */ --fc-text: #1F2328; /* charcoal: body text, dark buttons, focus */ --fc-text-muted: #5B6168; /* secondary text (6.0:1 on white) */ --fc-text-placeholder: #6A7077; /* input placeholder (4.9:1 on white) */ --fc-text-inverse: #FFFFFF; --fc-charcoal-hover: #33383F; /* dark button hover */ /* ---- Color: brand ---- */ --fc-accent: #FF7A1A; /* primary orange: fills only, never text */ --fc-accent-hover: #F06A0A; --fc-accent-active: #E35F00; --fc-accent-text: #C2410C; /* link orange (5.2:1 on white) */ --fc-accent-text-hover: #9A3412; --fc-accent-tint: #FFF1E6; /* icon tiles, callout fill */ /* ---- Color: status ---- */ --fc-success: #1F8A4C; /* icons and borders only */ --fc-success-text: #187A42; /* success text (5.4:1 on white) */ --fc-success-tint: #E8F5EE; --fc-warning: #B45309; --fc-error: #B42318; --fc-error-tint: #FEF3F2; /* ---- Color: overlays and shadows ---- */ --fc-overlay: rgba(31, 35, 40, 0.45); --fc-shadow-menu: 0 8px 16px rgba(31, 35, 40, 0.08); --fc-shadow-bar: 0 -4px 12px rgba(31, 35, 40, 0.06); --fc-shadow-toast: 0 8px 24px rgba(31, 35, 40, 0.2); --fc-scroll-shade: rgba(31, 35, 40, 0.16); --fc-surface-fade: rgba(255, 255, 255, 0); /* ---- Spacing: 4px scale ---- */ --fc-s-1: 4px; --fc-s-2: 8px; --fc-s-3: 12px; --fc-s-4: 16px; --fc-s-6: 24px; --fc-s-8: 32px; --fc-s-12: 48px; --fc-s-16: 64px; /* Two named exceptions from the brief. Use nowhere else. */ --fc-s-label: 6px; /* label -> field */ --fc-s-10: 40px; /* mobile section padding */ /* ---- Responsive spacing (mobile values; raised at 640 below) ---- */ --fc-page-x: 16px; /* container side padding */ --fc-section-y: 40px; /* section vertical padding */ --fc-card-pad: 16px; --fc-grid-gap: 16px; --fc-page-top: 8px; /* space above breadcrumb */ --fc-hero-top: 24px; /* ---- Radii ---- */ --fc-radius-card: 12px; --fc-radius-control: 10px; /* buttons, inputs */ --fc-radius-segment: 8px; /* selected unit-toggle segment */ --fc-radius-kbd: 4px; --fc-radius-pill: 999px; /* ---- Layout ---- */ --fc-content-width: 1160px; --fc-container-max: 1208px; /* 1160 + 2 x 24 padding */ --fc-header-h: 64px; /* 72px from 1024 */ --fc-sidebar-w: 320px; /* tool page sidebar */ --fc-toc-w: 280px; /* blog post TOC column */ --fc-faq-aside-w: 360px; /* home FAQ contact card */ --fc-hero-calc-w: 440px; --fc-drawer-w: 440px; --fc-measure: 70ch; /* ---- Type: families ---- */ --fc-font-head: "Barlow Semi Condensed", "Arial Narrow", sans-serif; /* 600 only */ --fc-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; /* variable 400-600 */ /* ---- Type: fluid sizes ---- */ --fc-fs-display: clamp(32px, 2.4vw + 20px, 56px); /* home H1 */ --fc-fs-h1: clamp(30px, 1.6vw + 22px, 46px); /* page H1 */ --fc-fs-h2: clamp(26px, 1vw + 20px, 34px); /* section H2 */ --fc-fs-h2-content: clamp(24px, 0.6vw + 20px, 30px); /* H2 inside article / tool content */ --fc-fs-featured: clamp(24px, 1vw + 18px, 32px); /* featured post title */ --fc-fs-result: clamp(48px, 2vw + 40px, 72px); /* tool primary result */ --fc-fs-quick-result: clamp(44px, 2vw + 32px, 56px); /* home quick-calc result */ --fc-fs-lead: clamp(16px, 0.4vw + 15px, 19px); /* home hero intro */ --fc-fs-lead-page: clamp(17px, 0.3vw + 16px, 19px); /* post lead, about intro */ --fc-fs-intro-tool: clamp(15px, 0.2vw + 14px, 17px); /* tool intro */ /* ---- Type: fixed sizes ---- */ --fc-fs-11: 11px; --fc-fs-12: 12px; --fc-fs-13: 13px; /* tags, meta, notice bar */ --fc-fs-14: 14px; /* help, breadcrumb, small meta */ --fc-fs-15: 15px; /* UI text, card body */ --fc-fs-16: 16px; /* body, inputs (never below 16 on inputs) */ --fc-fs-17: 17px; /* article body */ --fc-fs-18: 18px; --fc-fs-20: 20px; --fc-fs-21: 21px; /* card titles */ --fc-fs-22: 22px; /* card H2/H3, logo */ --fc-fs-24: 24px; --fc-fs-48: 48px; /* empty result dash */ /* ---- Type: line heights and weights ---- */ --fc-lh-body: 1.6; --fc-lh-ui: 1.4; --fc-lh-head: 1.2; --fc-lh-result: 1.1; --fc-fw-regular: 400; --fc-fw-medium: 500; --fc-fw-semibold: 600; /* ---- Focus ---- */ --fc-focus-width: 2px; --fc-focus-color: var(--fc-text); --fc-focus-offset: 2px; /* ---- Tap targets ---- */ --fc-tap: 44px; --fc-tap-lg: 48px; --fc-input-h: 48px; /* ---- Z-index layers ---- */ --fc-z-header: 30; /* header and mega menu */ --fc-z-sticky-bar: 40; /* mobile result action bar */ --fc-z-toast: 45; --fc-z-drawer: 50; /* project drawer + overlay */ --fc-z-skip: 60; /* skip link on focus */ } @media (min-width: 640px) { :root { --fc-page-x: 24px; --fc-section-y: 64px; --fc-card-pad: 24px; --fc-grid-gap: 24px; --fc-page-top: 16px; --fc-hero-top: 48px; } } @media (min-width: 1024px) { :root { --fc-header-h: 72px; } } /* ========================================================================== Breakpoints Layout breakpoints (min-width, mobile first): 640, 1024, 1280. Container queries: calculator card inner width 600 (side-by-side form/result). Everything between is fluid. Tested at every width below. Tested width | Band | Page pad | Section | Card pad | Gap 320 | mobile | 16 | 40 | 16 | 16 360 | mobile | 16 | 40 | 16 | 16 (quick-calc fields go 3-up from 360) 390 | mobile | 16 | 40 | 16 | 16 414 | mobile | 16 | 40 | 16 | 16 768 | tablet | 24 | 64 | 24 | 24 1024 | desktop | 24 | 64 | 24 | 24 1280 | wide | 24 | 64 | 24 | 24 1440 | wide | 24 | 64 | 24 | 24 (container capped at 1160) 1920 | wide | 24 | 64 | 24 | 24 Grid columns | <640 | 640-1023 | 1024-1279 | >=1280 Tool cards | 1 | 2 | 3 | 4 Category cards | 1 | 2 (5th spans 2) | 5 | 5 How it works | 1 | 2 | 4 | 4 Guides / blog / 404 | 1 | 2 | 3 | 3 Home hero | 1 | 1 | 1fr 440px | same Home FAQ | 1 | 1 | 1fr 360px | same Tool page | 1 | 1 | 1fr 320px | same Calculator card | 1 | 2 when card inner >= 600px (container query) Blog post | 1 | 1 | 1fr 280px | same Featured post | 1 | 1 | 7fr 5fr | same Footer | 2 | 4 (brand row) | 1.4fr + 4 | same ========================================================================== */