/* ========================================================================== erichunsicker.com — Design Tokens v2 (Ink + Signal) · PRODUCTION COPY Single source of truth for color, type, spacing, radius, shadow. Three-layer: PRIMITIVE (raw) -> SEMANTIC (purpose) -> COMPONENT. v2 2026-07-09 (Eric-approved): dark orange/black theme matching the Axis app's "Ink + Signal" palette (source of truth: app theme.ts / the /axis/ landing tokens). Replaces the light Fraunces/green editorial system. Semantic variable NAMES kept from v1 so page CSS keeps working. Kept in sync with ../../design-tokens.css (the human-readable spec). ========================================================================== */ :root { color-scheme: dark; /* --------------------------------------------------------------------- LAYER 1 — PRIMITIVES (raw values; never use directly in components) --------------------------------------------------------------------- */ /* Signal orange (the one knob — matches Axis --accent) */ --orange-600: #FF6B35; /* brand accent */ --orange-500: #FF8C5A; /* lighter — hover / accents on dark */ --orange-950: #3D1D10; /* accent-soft: tinted fills, poster warm base */ /* Ink neutrals (matches Axis Ink + Signal) */ --ink-950: #0A0A0B; /* page background */ --ink-925: #121214; /* lifted section background */ --ink-900: #161618; /* card */ --ink-850: #1F1F22; /* card pressed / hairline */ --ink-800: #27272A; /* border */ --white-50: #FAFAFA; /* primary text */ --gray-300: #C7C7CC; /* soft text — nav links, lead copy */ --gray-400: #6E6E73; /* dimmed partner-logo gray */ --gray-500: #8E8E93; /* muted text (Axis --text-secondary) */ --preview-todo: var(--gold-400); /* gold link = data still needed (preview only) */ /* Feedback */ --green-400: #4ADE80; /* success */ --red-400: #FF6369; /* error / danger (Axis --danger) */ /* Gold (gear / premium cues — Axis warmup gold) */ --gold-400: #D4B062; --gold-950: #2A2415; /* dark gold tint fill */ /* Placeholder scaffolding (preview only — real photos replace these) */ --ph-from: #1B1B1E; --ph-mid: #202024; --ph-to: #141416; --ph-text: #C7C7CC; /* Poster blocks (photo slots shipped as intentional editorial panels; a real dropped inside covers the poster automatically) */ --poster-from: #2A1710; --poster-mid: #1F1F22; --poster-to: #131315; --poster-text: #FAFAFA; --poster-muted: #8E8E93; /* Fonts (system stack — matches the Axis app/landing; no webfonts) */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Inter", sans-serif; /* --------------------------------------------------------------------- LAYER 2 — SEMANTIC (what tokens MEAN; use these in layout CSS) --------------------------------------------------------------------- */ /* Color roles */ --color-bg: var(--ink-950); --color-surface: var(--ink-925); /* alternating sections */ --color-surface-dark: var(--ink-900); /* card-style feature panels */ --color-text: var(--white-50); --color-text-soft: var(--gray-300); /* nav, footer links, lead copy */ --color-text-muted: var(--gray-500); --color-text-on-dark: var(--white-50); --color-text-on-dark-muted: var(--gray-300); --color-success-on-dark: var(--green-400); --color-error-on-dark: var(--red-400); --color-accent-green: var(--orange-500); /* legacy name: eyebrow/em on dark panels */ --color-text-on-primary: #FFFFFF; --color-primary: var(--orange-600); --color-primary-hover: var(--orange-500); --color-accent: var(--gold-400); --color-accent-bg: var(--gold-950); --color-accent-text: var(--gold-400); --color-border: var(--ink-800); --color-hairline: var(--ink-850); /* On-dark input set (legacy names, now the default input look) */ --on-dark-input-bg: var(--ink-950); --on-dark-input-border: var(--ink-800); --on-dark-placeholder: var(--gray-500); --on-dark-label: var(--gray-500); /* stat labels */ /* Typography roles */ --font-heading: var(--font-sans); --font-body: var(--font-sans); /* Type scale (fluid headings, fixed body) */ --text-display: clamp(2.6rem, 5.2vw, 4.2rem); /* hero */ --text-h1: clamp(2.25rem, 4vw, 3rem); --text-h2: clamp(1.9rem, 3.6vw, 2.8rem); --text-h3: 1.5rem; --text-h4: 1.25rem; --text-lead: 1.18rem; /* intro / lead paragraph */ --text-body: 1rem; --text-small: 0.875rem; --text-eyebrow: 0.75rem; /* uppercase label, letter-spaced */ /* Line heights */ --leading-display: 1.04; --leading-heading: 1.1; --leading-body: 1.6; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heading: 800; /* matches the Axis landing headline weight */ /* Letter spacing */ --tracking-eyebrow: 0.14em; --tracking-tight: -0.02em; /* big sans headlines want tighter tracking */ /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 96px; /* Section rhythm */ --section-y: var(--space-11); /* desktop vertical padding */ --section-y-mobile: var(--space-9); /* Radius (matches the Axis landing: card 14 / control 12) */ --radius-sm: 12px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; --radius-full: 50%; /* Shadow — dark theme = depth + accent glow (mirrors the Axis landing) */ --glow: color-mix(in srgb, var(--orange-600) 14%, transparent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45); --shadow-glow: 0 8px 28px var(--glow); /* Layout */ --container-max: 1180px; --container-read: 680px; --container-pad: var(--space-5); /* --------------------------------------------------------------------- LAYER 3 — COMPONENT (per-component, reference semantic only) --------------------------------------------------------------------- */ /* Button (primary) */ --btn-bg: var(--color-primary); --btn-bg-hover: var(--color-primary-hover); --btn-text: var(--color-text-on-primary); --btn-radius: var(--radius-pill); --btn-pad-y: var(--space-3); --btn-pad-x: var(--space-6); --btn-weight: var(--weight-semibold); /* Button (secondary / outline) */ --btn2-bg: var(--ink-900); --btn2-border: var(--color-border); --btn2-text: var(--color-text); /* Card */ --card-bg: var(--ink-900); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-pad: var(--space-6); /* Eyebrow / label */ --eyebrow-color: var(--color-primary); --eyebrow-size: var(--text-eyebrow); --eyebrow-track: var(--tracking-eyebrow); /* Link */ --link-color: var(--color-primary-hover); --link-hover: var(--orange-600); } /* ---------------------------------------------------------------------------- v2 NOTES (2026-07-09) — what changed vs the v1 light lock, and why: - Whole palette swapped to the Axis app's Ink + Signal (Eric wants the site to match the app; the light green/Fraunces system read "golf site"). - Fonts: Fraunces + Inter (Google Fonts) dropped for the app's system sans stack; --weight-heading 500 -> 800; --tracking-tight widened to -0.02em. - Radius sm/md tightened to the landing's 12/14px. - New --glow / --shadow-glow tokens copy the landing's accent-glow shadows. - Legacy semantic names (--color-surface-dark, --color-accent-green, on-dark-* set) kept but remapped so v1 page CSS renders correctly on dark. - --card-bg now maps to the card ink (#161618), NOT --color-bg: on dark, cards must sit above the page background. ---------------------------------------------------------------------------- */