/* Copyright (c) 2024-2026 Andrew Shea. All Rights Reserved.
* PROPRIETARY AND CONFIDENTIAL. Unauthorized copying, distribution, or use
* of this file, via any medium, is strictly prohibited. See LICENSE file.
*/
/* Public site design tokens — the 2026 public-site system.
* Paper, ink, and two brand colors borrowed from the mark (sky blue and orange),
* plus brass for evidence. Newsreader carries claims; Inter carries everything
* you read. Fonts ship via the Google Fonts in index.html.
* All public tokens are prefixed --pub- so they cannot collide with dashboard tokens.
* Legacy token names (--pub-navy, --pub-gold, --pub-rust, --pub-moss, --pub-font-mono)
* are kept as aliases so every existing public page picks up the new system. */
:root {
--pub-header-bar-height: 64px;
--pub-header-clearance: calc(var(--pub-header-bar-height) + 1px);
/* Surfaces */
--pub-paper: #F4F2EC;
--pub-paper-deep: #ECE9E1;
--pub-card: #FFFFFF;
/* Paper grain — kept for pages that still layer it; it is subtle on the new paper. */
--pub-paper-grain-url:
url("data:image/svg+xml;utf8,");
--pub-paper-grain-bg:
var(--pub-paper-grain-url),
var(--pub-paper);
--pub-paper-deep-grain-bg:
var(--pub-paper-grain-url),
var(--pub-paper-deep);
/* Ink */
--pub-ink: #0B0D12;
--pub-ink-soft: #2A2E37;
--pub-ink-faint: #5B616E;
--pub-ink-mute: #A8ADB8;
/* Rules */
--pub-rule: #DAD6CC;
--pub-rule-strong: #0B0D12;
--pub-rule-dark: #2E323B;
--pub-rule-hair: 0.5px solid var(--pub-rule);
--pub-rule-thin: 1px solid var(--pub-rule);
--pub-rule-mid: 2px solid var(--pub-ink);
--pub-rule-bold: 4px solid var(--pub-navy);
/* Brand */
--pub-brand-navy: #040816; /* stable brand surface from the logo icon (footer, CTA, cards) */
--pub-navy: var(--pub-brand-navy); /* legacy token: older pages use it as foreground */
--pub-navy-deep: #0B0D12;
--pub-blue: #1F4FD8; /* primary action on light ground, links */
--pub-blue-deep: #1741B8;
--pub-blue-soft: #E6ECFB;
--pub-on-blue: #FFFFFF;
/* Main button on a dark photo or dark panel. Those sections stay dark in both themes,
* so the button is paper with ink text in both themes. On paper or a card the main
* button is --pub-ink with --pub-paper text, and those two tokens invert in dark mode. */
--pub-cta-inverse-bg: #F4F2EC;
--pub-cta-inverse-ink: #0B0D12;
--pub-cta-inverse-hover: #ECE9E1;
--pub-brass: #B8924A; /* decorative evidence lines and marks */
--pub-brass-text: #755A2C; /* WCAG-readable evidence text on light surfaces */
--pub-brass-soft: #F5EEDD;
--pub-orange: #F48B23; /* from the logo star; eyebrow marker */
--pub-green: #2F7D4F; /* verified */
--pub-red: #C0392B;
/* Legacy semantic aliases (still referenced by older public pages) */
--pub-gold: var(--pub-brass-text);
--pub-rust: var(--pub-blue);
--pub-moss: var(--pub-green);
/* Type families */
--pub-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
--pub-font-display-weight: 500;
--pub-font-display-settings: 'opsz' 72;
--pub-font-serif: Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
--pub-font-mono: Inter, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Type scale */
--pub-text-xs: 12px;
--pub-text-xs-lh: 16px;
--pub-text-sm: 14px;
--pub-text-sm-lh: 21px;
--pub-text-base: 17px;
--pub-text-base-lh: 27px;
--pub-text-lg: 18px;
--pub-text-lg-lh: 28px;
--pub-text-xl: 20px;
--pub-text-xl-lh: 30px;
--pub-headline: clamp(38px, 3.6vw, 52px);
--pub-display: clamp(40px, 4.4vw, 60px);
--pub-hero: clamp(40px, 4.6vw, 66px);
--pub-lede: clamp(18px, 1.45vw, 21px);
--pub-numeral: clamp(36px, 4.6vw + 8px, 64px);
--pub-title-section: clamp(28px, 2.3vw, 34px);
--pub-title-item: clamp(20px, 1.7vw, 24px);
--pub-title-item-lh: 1.3;
--pub-index: 13px;
--pub-eyebrow-tracking: 0.11em;
/* Spacing scale */
--pub-space-1: 4px;
--pub-space-2: 8px;
--pub-space-3: 12px;
--pub-space-4: 16px;
--pub-space-6: 24px;
--pub-space-7: 28px;
--pub-space-8: 32px;
--pub-space-10: 40px;
--pub-space-12: 48px;
--pub-space-16: 64px;
--pub-space-20: 80px;
--pub-space-24: 96px;
--pub-space-32: 128px;
--pub-section-y: clamp(72px, 7.8vw, 112px);
/* Layout */
--pub-content-max: 760px;
--pub-margin-col: 96px;
--pub-page-edge: 1440px;
--pub-gutter: clamp(24px, 4.4vw, 64px);
/* Radii */
--pub-radius-input: 2px;
--pub-radius-cta: 2px;
--pub-radius-chip: 2px;
--pub-radius-pill: 9999px;
/* Motion — four curves, five durations. See Figma "09 Motion & interaction". */
--pub-ease-luxe: cubic-bezier(0.16, 1, 0.30, 1); /* reveals, hero entrance */
--pub-ease-page: cubic-bezier(0.22, 1, 0.36, 1); /* standard: tabs, accordion, nav surface */
--pub-ease-soft: cubic-bezier(0.65, 0, 0.35, 1); /* crossfades */
--pub-ease-micro: cubic-bezier(0.20, 0, 0, 1); /* hover, press, focus */
--pub-dur-micro: 160ms;
--pub-dur-rule: 320ms;
--pub-dur-ink: 480ms;
--pub-dur-reveal: 900ms;
--pub-dur-hero: 1400ms;
--pub-dur-draw: 1200ms;
--pub-dur-pageturn: 800ms;
--pub-stagger: 60ms;
/* Sample resume document shadow */
--pub-shadow-doc: 0 24px 60px -32px rgba(11, 13, 18, 0.22);
}
.pub-title-section { font-family: var(--pub-font-display); font-size: var(--pub-title-section); font-weight: 500; line-height: 1.16; letter-spacing: -0.015em; text-wrap: balance; }
.pub-title-item { font-family: var(--pub-font-display); font-size: var(--pub-title-item); font-weight: 500; line-height: var(--pub-title-item-lh); letter-spacing: -0.01em; }
.pub-index { font: 500 var(--pub-index)/1.5 var(--pub-font-serif); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.dark {
/* Public surfaces follow the global dark-mode toggle: invert paper and ink,
* keep brass and blue legible on the dark ground. */
--pub-paper: #0B0D12;
--pub-paper-deep: #131722;
--pub-card: #161B27;
--pub-paper-grain-url:
url("data:image/svg+xml;utf8,");
--pub-ink: #F4F2EC;
--pub-ink-soft: #D9D6CE;
--pub-ink-faint: #A8ADB8;
--pub-ink-mute: #6B7280;
--pub-rule: #252A36;
--pub-rule-strong: #F4F2EC;
--pub-rule-dark: #323848;
/* Legacy pages use navy as foreground text; brand surfaces keep --pub-brand-navy. */
--pub-navy: #9CC7E7;
--pub-navy-deep: #D5E8F6;
--pub-blue: #7C9BFF;
--pub-blue-deep: #6B8BEF;
--pub-blue-soft: #1A2440;
--pub-on-blue: #0B0D12;
--pub-brass: #D2B06A;
--pub-brass-text: #D2B06A;
--pub-brass-soft: #2A2416;
--pub-green: #6FBF8E;
--pub-shadow-doc: 0 30px 72px -34px rgba(0, 0, 0, 0.72);
}
@media (min-width: 1200px) {
:root { --pub-header-bar-height: 80px; }
}
/* Phone typography uses the same hierarchy at a comfortable reading size.
* Keep this in public tokens so home, editorial and legal pages agree without
* changing the browser's base font size, form controls or workspace styles. */
@media (max-width: 639px) {
:root {
--pub-text-base: 16px;
--pub-text-base-lh: 1.6;
--pub-text-lg: 16px;
--pub-text-lg-lh: 1.6;
--pub-text-xl: 18px;
--pub-text-xl-lh: 1.5;
--pub-headline: 28px;
--pub-display: 32px;
--pub-hero: clamp(30px, 8.2vw, 34px);
--pub-lede: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--pub-dur-micro: 0ms;
--pub-dur-rule: 0ms;
--pub-dur-ink: 0ms;
--pub-dur-reveal: 0ms;
--pub-dur-hero: 0ms;
--pub-dur-draw: 0ms;
--pub-dur-pageturn: 0ms;
--pub-stagger: 0ms;
}
}
/* Theme-aware brand lockup: the dark-ring icon and dark wordmark by default,
the approved light lockup (white ring, white wordmark) under .dark. */
[data-brand-wordmark='auto'] [data-lockup='light'] { display: none; }
.dark [data-brand-wordmark='auto'] [data-lockup='light'] { display: block; }
.dark [data-brand-wordmark='auto'] [data-lockup='dark'] { display: none; }
/* The roadmap hero action is the one primary that still reads --pub-blue; dark mode lifts the blue, so it takes ink text. */
.dark .stitch-roadmap__hero-actions a:first-child { color: #0B0D12; }