/* * AI Infrastructure Intelligence — Design Tokens v2 * Reference targets: Linear / Stripe Sigma / AlphaSense * * Authority: docs/ui-review/UI-TOKENS.md * Migration: every v1 token name is aliased to its v2 equivalent below so existing * CSS continues to resolve. New CSS should reference v2 names directly. * * Layer 1 of the 5-layer architecture. This file declares variables only; no rules. */ :root { /* ============================================================ */ /* Color — neutrals & surfaces */ /* ============================================================ */ --color-ink-900: #0F171C; --color-ink-800: #172026; --color-ink-700: #233039; --color-steel-600: #3D5A66; --color-steel-500: #56747F; --color-steel-400: #6D7880; --color-steel-300: #8896A0; --color-line-300: #C0CAD1; --color-line-200: #D7DDE0; --color-line-100: #E6EBEE; --color-paper: #F4F1EA; --color-paper-tint: #F8F6F1; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; /* ============================================================ */ /* Color — brand & accent (one role: where the analyst's */ /* attention is committed) */ /* ============================================================ */ --color-brand-700: #8C4923; --color-brand-600: #B45F35; --color-brand-500: #CC7A52; --color-brand-100: #FBEFE7; --color-brand-50: #FDF7F3; /* ============================================================ */ /* Color — semantic states */ /* ============================================================ */ --color-risk-text: #8B2118; --color-risk-bg: #FBF0EA; --color-risk-border: #EFC0B8; --color-positive-text: #176039; --color-positive-bg: #EDF7F1; --color-positive-border: #B7DEC6; --color-warn-text: #6F5A17; --color-warn-bg: #FFF8E7; --color-warn-border: #DCC06B; --color-info-text: #1C5276; --color-info-bg: #EEF5FA; --color-info-border: #B8D4E4; --color-neutral-text: #56747F; --color-neutral-bg: #F4F6F7; --color-neutral-border: #D7DDE0; /* ============================================================ */ /* Color — data visualization (previously hardcoded) */ /* ============================================================ */ --color-data-1: #1F6F8B; /* teal */ --color-data-2: #728E5C; /* sage */ --color-data-3: #B45F35; /* clay = brand-600 */ --color-data-4: #535378; /* slate */ --color-data-5: #8F6B38; /* bronze */ --color-data-6: #4B7D89; /* teal-2 */ /* ============================================================ */ /* Color — interaction states */ /* ============================================================ */ --color-hover-overlay: rgba(23, 32, 38, 0.04); --color-pressed-overlay: rgba(23, 32, 38, 0.08); --color-focus-ring: rgba(180, 95, 53, 0.40); --color-scrim: rgba(15, 23, 28, 0.45); /* ============================================================ */ /* Elevation — box-shadow ramp */ /* ============================================================ */ --elevation-1: 0 1px 2px rgba(15, 23, 28, 0.06), 0 1px 3px rgba(15, 23, 28, 0.05); --elevation-2: 0 4px 12px rgba(15, 23, 28, 0.08), 0 2px 4px rgba(15, 23, 28, 0.06); --elevation-3: 0 24px 64px rgba(15, 23, 28, 0.18), 0 8px 16px rgba(15, 23, 28, 0.10); --color-selection-edge: var(--color-brand-600); --color-divider: var(--color-line-200); /* ============================================================ */ /* Typography */ /* ============================================================ */ --font-sans: "Public Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --type-display-xl-size: 32px; --type-display-xl-lh: 1.1; --type-display-lg-size: 24px; --type-display-lg-lh: 1.15; --type-title-md-size: 18px; --type-title-md-lh: 1.25; --type-title-sm-size: 15px; --type-title-sm-lh: 1.3; --type-body-md-size: 14px; --type-body-md-lh: 1.5; --type-body-sm-size: 13px; --type-body-sm-lh: 1.45; --type-caption-size: 12px; --type-caption-lh: 1.3; --type-overline-size: 11px; --type-overline-lh: 1.3; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-tight: -0.01em; --ls-normal: 0em; --ls-mono: 0em; --ls-overline: 0.06em; /* ============================================================ */ /* Spacing — 4px base */ /* ============================================================ */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 48px; --space-10: 64px; /* ============================================================ */ /* Radius */ /* ============================================================ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ============================================================ */ /* Elevation (borders-first, shadows where necessary) */ /* ============================================================ */ --elev-0: none; --elev-1: inset 0 0 0 1px var(--color-line-200); --elev-2: 0 1px 2px rgba(15, 23, 28, 0.05), 0 4px 12px rgba(15, 23, 28, 0.08); --elev-3: 0 4px 8px rgba(15, 23, 28, 0.06), 0 16px 32px rgba(15, 23, 28, 0.10); --selected-edge: inset 2px 0 0 var(--color-brand-600); --selected-edge-strong: inset 3px 0 0 var(--color-brand-600); --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring); --inset-risk: inset 0 0 0 1px var(--color-risk-border); --inset-positive: inset 0 0 0 1px var(--color-positive-border); --inset-warn: inset 0 0 0 1px var(--color-warn-border); --inset-info: inset 0 0 0 1px var(--color-info-border); /* ============================================================ */ /* Motion */ /* ============================================================ */ --motion-snap: cubic-bezier(0.2, 0.7, 0.2, 1); --motion-smooth: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --dur-none: 0ms; /* ============================================================ */ /* Z-index scale */ /* ============================================================ */ --z-base: 0; --z-sticky: 10; --z-dropdown: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-cmdk: 500; /* ============================================================ */ /* Breakpoints (for use in JS / container queries) */ /* ============================================================ */ --bp-mobile: 640px; --bp-tablet: 960px; --bp-laptop: 1280px; --bp-desktop: 1440px; --bp-wide: 1920px; /* ============================================================ */ /* v1 → v2 aliases — literal v1 values preserved */ /* */ /* Aliases resolve to the EXACT v1 hex values so Commit 1 ships */ /* zero visual change. Where v2 introduces a contrast-improved */ /* variant (--color-positive-text, --color-risk-text, etc.), */ /* components migrate to it deliberately, not by accident. */ /* ============================================================ */ --ink: var(--color-ink-800); /* #172026 — identical to v1 */ --steel: var(--color-steel-600); /* #3D5A66 — identical to v1 */ --clay: var(--color-brand-600); /* #B45F35 — identical to v1 */ --paper: var(--color-paper); /* #F4F1EA — identical to v1 */ --surface: var(--color-surface); /* #FFFFFF — identical to v1 */ --muted: var(--color-steel-400); /* #6D7880 — identical to v1 */ --border: var(--color-line-200); /* #D7DDE0 — identical to v1 */ --positive: #1f7a4d; /* v1 literal — separate from --color-positive-text */ --risk: #b42318; /* v1 literal — separate from --color-risk-text */ --warn-surface: var(--color-risk-bg); /* #FBF0EA — identical to v1 */ --ok-surface: var(--color-positive-bg);/* #EDF7F1 — identical to v1 */ --soft-surface: #f8fafb; /* v1 literal — separate from --color-neutral-bg */ --mono: var(--font-mono); --sans: var(--font-sans); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }