/* ============================================================ STITCHCORE · Design Tokens Colors, type, spacing, motion, stripe system One-file rebrand surface — nothing hardcodes color downstream. ============================================================ */ :root { /* ---------- Brand colors ---------- */ --sc-plum: #2b124c; /* brand plum — accent, punctuation */ --sc-ink: #0f1216; /* primary dark */ --sc-paper: #ffffff; /* primary light */ --sc-paper-soft: #f8f9fb; /* sunken light surface */ --sc-muted: #475569; /* secondary text on light */ --sc-rule: #e5e7eb; /* hairlines on light */ --sc-night: #0b0b0b; /* dark surface (hero option) */ --sc-error: #b42318; /* form validation only */ /* ---------- Tonal extensions ---------- */ --sc-plum-06: rgba(43, 18, 76, 0.06); --sc-plum-14: rgba(43, 18, 76, 0.14); --sc-plum-18: rgba(43, 18, 76, 0.18); --sc-ink-72: rgba(15, 18, 22, 0.72); --sc-ink-48: rgba(15, 18, 22, 0.48); --sc-ink-24: rgba(15, 18, 22, 0.24); --sc-ink-12: rgba(15, 18, 22, 0.12); --sc-paper-72: rgba(255, 255, 255, 0.72); --sc-paper-48: rgba(255, 255, 255, 0.48); --sc-paper-24: rgba(255, 255, 255, 0.24); --sc-paper-12: rgba(255, 255, 255, 0.12); /* ---------- Semantic — light surface (site default) ---------- */ --bg: var(--sc-paper); --bg-raised: #ffffff; --bg-sunken: var(--sc-paper-soft); --fg-1: var(--sc-ink); --fg-2: var(--sc-ink-72); --fg-3: var(--sc-ink-48); --fg-mute: var(--sc-ink-24); --line: var(--sc-ink-12); --line-strong: var(--sc-ink-24); --accent: var(--sc-plum); /* ---------- Pinstripes (kept from the current site — DIRECTION §2) ---------- Two layered 1px repeating gradients: fine stripe on a 16px rhythm, faint plum on 32px, drifting at different speeds. Values per surface. */ --stripe: #f3f6fb; --stripe-plum: var(--sc-plum-06); --stripe-o1: 0.6; /* fine layer opacity */ --stripe-o2: 0.35; /* plum layer opacity */ /* ---------- Type ---------- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body — screen-reading workhorse */ --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* headings — geometric grotesque, professional with warmth */ --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --fs-eyebrow: 12px; --fs-body-sm: 14px; --fs-body: 16px; --fs-body-lg: 18px; --fs-lead: clamp(19px, 2vw, 23px); --fs-h4: 28px; --fs-h3: clamp(28px, 3.4vw, 40px); --fs-h2: clamp(34px, 4.6vw, 58px); --fs-h1: clamp(40px, 6.2vw, 84px); --fs-hero: clamp(34px, 4.4vw, 60px); /* hero shares a viewport with the screenshot — h1 scale is too big there */ --lh-tight: 1.06; --lh-snug: 1.2; --lh-body: 1.6; --lh-loose: 1.75; --ls-display: -0.02em; --ls-tight: -0.01em; --ls-wide: 0.08em; --ls-wider: 0.16em; /* ---------- Spacing (8pt grid) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --section-y: clamp(72px, 10vw, 140px); --container-max: 1240px; --container-pad: clamp(20px, 4vw, 48px); /* ---------- Borders / radii ---------- */ --radius-1: 3px; --radius-2: 8px; --radius-3: 16px; /* ---------- Shadow (restrained) ---------- */ --shadow-1: 0 1px 2px rgba(15,18,22,0.04), 0 0 0 0.5px rgba(15,18,22,0.06); --shadow-2: 0 8px 24px -8px rgba(15,18,22,0.10), 0 0 0 0.5px rgba(15,18,22,0.06); --shadow-3: 0 24px 60px -20px rgba(15,18,22,0.18); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; } /* ---------- Surface overrides ---------- Flip any section between light and dark with one class — stripe tokens travel with the surface. */ .sc-light { --bg: var(--sc-paper); --bg-raised: #ffffff; --bg-sunken: var(--sc-paper-soft); --fg-1: var(--sc-ink); --fg-2: var(--sc-ink-72); --fg-3: var(--sc-ink-48); --fg-mute: var(--sc-ink-24); --line: var(--sc-ink-12); --line-strong: var(--sc-ink-24); --stripe: #f3f6fb; --stripe-plum: var(--sc-plum-06); color: var(--fg-1); background: var(--bg); } .sc-dark { --bg: var(--sc-night); --bg-raised: #15161a; --bg-sunken: #060607; --fg-1: var(--sc-paper); --fg-2: var(--sc-paper-72); --fg-3: var(--sc-paper-48); --fg-mute: var(--sc-paper-24); --line: var(--sc-paper-12); --line-strong: var(--sc-paper-24); --stripe: rgba(255, 255, 255, 0.08); --stripe-plum: var(--sc-plum-18); color: var(--fg-1); background: var(--bg); } /* ============================================================ Type recipes — editorial register: mixed case, lower weight, generous leading. Never uppercase a headline. ============================================================ */ .sc-eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wider); text-transform: uppercase; /* eyebrows only — never headlines */ color: var(--fg-3); line-height: 1; } .sc-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; } .sc-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; } .sc-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } .sc-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: 1.25; } .sc-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-2); max-width: 58ch; text-wrap: pretty; } .sc-body { font-size: var(--fs-body); line-height: var(--lh-body); } .sc-small { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-2); } .sc-rule { height: 1px; background: var(--line); border: 0; width: 100%; }