/* ─────────────────────────────────────────────────────────────────── * Kennedy Painting — Design Tokens v1 * * Drop-in CSS custom properties for any Kennedy-branded greenfield * build. Two consumption modes: * * 1. Greenfield root: import this into your global stylesheet and * use the tokens directly via var(--kennedy-red), var(--ink), etc. * * 2. Themed overlay: if the host app uses multi-tenant theming, * scope all values under a [data-theme="kennedy"] selector and * remove the :root block. * * Authored by Vera, 2026-05-27. * Brand red sampled from /badges/since-1998-arch-badge.png (11 points, * mean RGB 189, 29, 37 → #BD1D25, canonical: #BD1C24). * ─────────────────────────────────────────────────────────────────── */ :root { /* ── Brand color ── */ --kennedy-red: #BD1C24; --kennedy-red-deep: #9C1820; /* hover, pressed */ --kennedy-red-soft: #F7DDDF; /* tinted background, callouts */ --kennedy-red-line: rgba(189, 28, 36, 0.32); /* ── Ink (text) ── */ --ink: #1F2124; /* primary text, body */ --ink-soft: #69727D; /* secondary text, metadata */ --ink-faint: #9AA0A8; /* tertiary, placeholder */ /* ── Surfaces ── */ --paper: #FFFFFF; /* primary surface */ --paper-2: #F6F6F4; /* subtle section banding */ --paper-3: #ECECE8; /* deepest neutral surface */ /* ── Rules (borders) ── */ --rule: rgba(31, 33, 36, 0.08); --rule-strong: rgba(31, 33, 36, 0.14); --rule-soft: rgba(31, 33, 36, 0.04); /* ── Status / semantic Calibrated to coexist with --kennedy-red without confusion. --danger is deliberately a half-step deeper than --kennedy-red so brand-red CTAs are visually distinct from real errors. ── */ --success: #2D6A3F; --success-soft: #E6EFE6; --success-ink: #143B22; --warning: #C87B2C; /* burnt amber, not yellow */ --warning-soft: #FBEEDA; --warning-ink: #6B4012; --danger: #A8322A; --danger-soft: #FBE9E7; --danger-ink: #571712; /* ── Shadows Heritage trades brand: subtle, layered, never floaty. ── */ --shadow-1: 0 1px 0 rgba(31, 33, 36, 0.04), 0 1px 2px rgba(31, 33, 36, 0.04), 0 2px 6px rgba(31, 33, 36, 0.04); --shadow-2: 0 1px 0 rgba(31, 33, 36, 0.04), 0 1px 2px rgba(31, 33, 36, 0.05), 0 4px 14px rgba(31, 33, 36, 0.06); --shadow-3: 0 1px 0 rgba(31, 33, 36, 0.04), 0 2px 6px rgba(31, 33, 36, 0.06), 0 12px 28px rgba(31, 33, 36, 0.10); --shadow-pop: 0 1px 0 rgba(31, 33, 36, 0.04), 0 4px 12px rgba(31, 33, 36, 0.08), 0 24px 60px rgba(31, 33, 36, 0.18); /* ── Radii Slightly rounded — not sharp, not soft. ── */ --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ── Typography ── Pair confirmed from stlouishousepainting.com : - Oswald for display / heroes / eyebrows (condensed sans-serif) - Montserrat for headings + body (geometric sans-serif) Wordmark is a custom mark — never re-typeset in CSS. ── */ --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* Display sizing (Oswald, all-caps, tracking -10 to -20 in design tools) */ --size-hero: clamp(56px, 9vw, 144px); /* page-opening hero */ --size-display: clamp(40px, 5vw, 72px); /* section opener */ --size-eyebrow: 14px; /* uppercase eyebrow */ /* Heading sizing (Montserrat) */ --size-h1: clamp(32px, 4vw, 48px); --size-h2: clamp(26px, 3vw, 36px); --size-h3: clamp(20px, 2.2vw, 26px); --size-h4: 18px; /* Body sizing (Montserrat) */ --size-body-lg: 18px; /* marketing surfaces */ --size-body: 16px; /* default — never go below this on operator screens */ --size-body-sm: 14px; /* captions, dense tables */ --size-meta: 13px; /* metadata, timestamps — minimum readable */ /* Line height */ --leading-tight: 1.05; /* Oswald display */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.5; /* body */ --leading-loose: 1.7; /* long-form prose */ /* Tracking */ --tracking-display: -0.015em; /* Oswald hero, tight */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows, all-caps labels */ /* Weights actually used */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Spacing (4px base grid) ── */ --space-0: 0; --space-1: 4px; --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-24: 96px; /* ── Z-index scale ── */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 10000; /* ── Motion ── */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ── Base body styling (opinionated — opt in by importing this section) ── */ body.kennedy { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--size-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Display type primitive ── */ .kennedy-display { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); } /* ── Eyebrow primitive ── */ .kennedy-eyebrow { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--size-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-soft); }