/* ============================================================ ISG — Shared Design Tokens (Option B · Enterprise Sharp) Linked by /index.html (React SPA) and /main/index.html (landing). Contains only universal tokens: typography, shape, spacing, motion, focus, and a dual-theme color system (light + dark). Per-surface visual decisions live in their own stylesheet (src/index.css for the SPA, public/main/styles.css for the landing). Theme switching: light is the default. Add data-theme="dark" to to activate the dark palette. ============================================================ */ /* ============================================================ Self-hosted Geist + Geist Mono (Variable, full weight range). Files live at /fonts/geist-sans.woff2 + /fonts/geist-mono.woff2. font-display: swap so text is visible immediately on first paint; the variable file covers every weight in a single request. ============================================================ */ @font-face { font-family: 'Geist'; src: url('fonts/geist-sans.woff2') format('woff2-variations'), url('fonts/geist-sans.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono.woff2') format('woff2-variations'), url('fonts/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ——— Typography ——— */ --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-features: 'ss01' 1, 'cv11' 1, 'tnum' 1; /* ——— Shape scale (tightened for Enterprise Sharp) ——— */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; /* reserved for media frames */ --radius-pill: 999px; /* reserved for small meta chips only */ /* ——— Spacing scale (4pt grid) ——— */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ——— Motion (short, functional, no spring) ——— */ --motion-fast: 120ms; --motion-medium: 180ms; --motion-slow: 280ms; /* Continuous loops — different timing budget from one-shot transitions */ --motion-spin: 700ms; /* spinner rotation */ --motion-sweep: 1400ms; /* skeleton shimmer */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ——— Focus ring ——— */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ============================================================ LIGHT THEME (default) ============================================================ */ /* Neutral surface scale */ --bg: #fbfbfb; --surface-1: #ffffff; --surface-2: #f5f5f6; --surface-3: #ececed; --surface-4: #dddfe2; /* Ink */ --ink: #111214; --ink-2: #3a3c42; --ink-3: #6e7079; --ink-4: #9a9ca4; /* Rules (hairlines) */ --rule: rgba(17, 18, 20, 0.12); --rule-strong: rgba(17, 18, 20, 0.22); /* Accent — single muted brick red, used as signal. #c14d36 was picked over the original #c7543c so white text on accent (and accent text on bg) clears WCAG 2.1 AA 4.5:1 for small text. See PROGRESS.md Phase 7. */ --accent: #c14d36; --accent-hover: #cc5740; --accent-soft: rgba(193, 77, 54, 0.12); --accent-ink: #ffffff; /* ink that sits on top of the accent */ /* Back-compat aliases (remove after Phase 4) */ --brand-red: var(--accent); --brand-red-strong: var(--accent-hover); --brand-red-bright: var(--accent-hover); --brand-red-soft: var(--accent-soft); --brand-red-glow: transparent; /* glows retired */ } /* ============================================================ DARK THEME Applied via . Same token names, different values; per-surface CSS stays the same. ============================================================ */ :root[data-theme='dark'] { --bg: #0a0b0d; --surface-1: #16181d; --surface-2: #1e2127; --surface-3: #262931; --surface-4: #30343d; --ink: #f3f4f6; --ink-2: #b9bdc4; --ink-3: #7d818a; --ink-4: #565962; --rule: rgba(255, 255, 255, 0.10); --rule-strong: rgba(255, 255, 255, 0.22); /* Accent slightly lifted for contrast on dark bg */ --accent: #d3604a; --accent-hover: #dc7056; --accent-soft: rgba(211, 96, 74, 0.14); --accent-ink: #0a0b0d; } /* ============================================================ Typography baseline ============================================================ */ /* NOTE: Light is the default for first-time visitors. We do NOT auto-switch based on prefers-color-scheme — the toggle is an explicit choice, persisted via localStorage. */ html { font-family: var(--font-sans); font-feature-settings: var(--font-features); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg); color: var(--ink); } code, kbd, samp, pre { font-family: var(--font-mono); font-feature-settings: var(--font-features); } ::selection { background: var(--accent-soft); color: var(--ink); } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }