/* ========================================================================== tokens.css — Forge AI Design System v0.1 Single source of truth for design tokens. Every other stylesheet, every inline style, every component must reference these custom properties — never hardcode a color, a type size, a spacing value, or a duration. Full reference: /context/design-system.md Decision record: wiki/decisions/Design_System_v0.1.md Section cadence is dark-primary with strategic light moments. Components read from "active mode" tokens (--bg, --text-primary, etc.) which are re-bound on [data-mode="light"]. Do not introduce new ad-hoc tokens without updating the design-system reference first. ========================================================================== */ :root { /* ---------------------------------------------------------------------- Backgrounds ---------------------------------------------------------------------- */ --bg-dark: #0E1014; /* deep ink — primary surface */ --bg-light: #F7F7F8; /* cool off-white — strategic surface */ --bg-subtle: #1A1D23; /* dark elevated surface — cards on dark */ /* ---------------------------------------------------------------------- Text — dual-mode Components reference --text-primary / --text-secondary / --text-tertiary which are bound to dark values by default and re-bound on light sections. ---------------------------------------------------------------------- */ --text-primary-dark: #FAFAFB; /* cooled white — never pure #FFF */ --text-primary-light: #0E1014; --text-secondary-dark: #A1A1AA; --text-secondary-light: #52525B; --text-tertiary-dark: #8B8B95; /* WCAG-AA on #0E1014 — 5.65:1; bumped from #71717A (3.93:1) */ --text-tertiary-light: #71717A; --text-disabled-dark: #52525B; --text-disabled-light: #A1A1AA; /* ---------------------------------------------------------------------- Borders ---------------------------------------------------------------------- */ --border-subtle-dark: #27272A; --border-subtle-light: #E4E4E7; --border-emphasis-dark: #3F3F46; --border-emphasis-light: #D4D4D8; /* ---------------------------------------------------------------------- Primary — workhorse blue (links, focus rings, primary CTA) ---------------------------------------------------------------------- */ --primary: #2563EB; --primary-hover: #1D4ED8; /* ---------------------------------------------------------------------- Brand ember — environment, not function Use only for: logomark glow on dark, hero ember moments, CTA hover border glow, link hover, active/breathing PCG nodes. Never for warning/error/info (use semantic tokens). Never as a background fill. Target visual surface area ~10% of the page. ---------------------------------------------------------------------- */ --ember: #C2410C; --ember-glow: #F97316; --ember-deep: #9A3412; /* ---------------------------------------------------------------------- Semantic — functional, separate from brand ---------------------------------------------------------------------- */ --success: #10B981; --warning: #F59E0B; --error: #EF4444; --info: #3B82F6; /* ---------------------------------------------------------------------- Type — font stacks Inter and JetBrains Mono are self-hosted woff2 (Latin subset) under /assets/fonts/. System stacks are the fallback during font load. ---------------------------------------------------------------------- */ --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Display sizes — weight 500 only, never above 600 */ --text-display-xl: 96px; /* hero only */ --text-display-lg: 64px; --text-display-md: 48px; --text-display-sm: 40px; /* Heading sizes */ --text-heading-lg: 36px; --text-heading-md: 28px; --text-heading-sm: 24px; --text-heading-xs: 20px; /* Body sizes */ --text-body-lg: 18px; --text-body-md: 16px; --text-body-sm: 14px; /* Caption + eyebrow */ --text-caption: 13px; --text-eyebrow: 12px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Line heights */ --leading-display: 1.0; --leading-display-loose: 1.05; --leading-heading: 1.15; --leading-heading-loose: 1.25; --leading-body: 1.6; --leading-caption: 1.4; /* Tracking (letter-spacing) */ --tracking-display-tight: -0.025em; /* 64–96px */ --tracking-display: -0.02em; /* 40–56px */ --tracking-heading: -0.015em; /* 28–36px */ --tracking-heading-tight: -0.01em; /* 20–24px */ --tracking-body: 0; --tracking-caption: 0.02em; --tracking-eyebrow: 0.08em; /* ---------------------------------------------------------------------- Spacing scale — 8pt grid Section vertical padding: --space-8 / --space-9 Inner gap within section: --space-7 / --space-8 Card internal padding: --space-4 / --space-5 ---------------------------------------------------------------------- */ --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px; /* ---------------------------------------------------------------------- Radius ---------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* ---------------------------------------------------------------------- Shadows --shadow-ember reserved for CTA hover and brand-mark glow. ---------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16); --shadow-ember: 0 0 24px rgba(249, 115, 22, 0.20); /* ---------------------------------------------------------------------- Motion Every motion must (a) demonstrate the product thesis, (b) reveal information, or (c) confirm interactivity. No parallax, no animated gradients, no auto-playing carousels. See design-system.md. ---------------------------------------------------------------------- */ --motion-fast: 200ms; /* hover, micro-interactions */ --motion-default: 300ms; /* fade-in, section entry */ --motion-counter: 600ms; /* stat counter animations */ --motion-pcg-pulse: 7000ms; /* hero PCG breathing cycle */ --easing: cubic-bezier(0.4, 0, 0.2, 1); /* ---------------------------------------------------------------------- Active-mode bindings (DARK by default — site-wide) Re-bound below by [data-mode="light"] for strategic light sections. Components should reference these "active" tokens, not the *-dark / *-light originals. ---------------------------------------------------------------------- */ --bg: var(--bg-dark); --bg-elevated: var(--bg-subtle); --text-primary: var(--text-primary-dark); --text-secondary: var(--text-secondary-dark); --text-tertiary: var(--text-tertiary-dark); --text-disabled: var(--text-disabled-dark); --border-subtle: var(--border-subtle-dark); --border-emphasis: var(--border-emphasis-dark); } /* ---------------------------------------------------------------------- Light-mode override Apply [data-mode="light"] to a
(or any container) to flip the active tokens. Components consume the active tokens and adapt. ---------------------------------------------------------------------- */ [data-mode="light"] { --bg: var(--bg-light); --bg-elevated: #FFFFFF; --text-primary: var(--text-primary-light); --text-secondary: var(--text-secondary-light); --text-tertiary: var(--text-tertiary-light); --text-disabled: var(--text-disabled-light); --border-subtle: var(--border-subtle-light); --border-emphasis: var(--border-emphasis-light); } /* ---------------------------------------------------------------------- Reduced motion — global override Honors prefers-reduced-motion across the entire site. Targeted motion (PCG breathing, counters) must additionally check this preference in JS so it can opt out of starting the animation at all. ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; } }