/* * tokens.css — Single source of truth for all design tokens (Phase 8). * Sourced from .planning/ui-research/DESIGN_TOKENS_RESEARCH.md with these overrides: * - D-03: accent = Linear indigo #5e6ad2 (hover #7170ff) * - D-04: table row = 32px, cell padding = 8px (dense default, no toggle) * - D-05: --ease-spring = cubic-bezier(0.175, 0.885, 0.32, 1.275) (Framer-like) * - D-07: Inter Variable self-hosted at ../fonts/, tabular-nums helper * Do not add bare hex outside this file — other CSS must reference var(--token-name). */ @font-face { font-family: 'Inter Variable'; src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Variable'; src: url('../fonts/Inter-Variable-Italic.woff2') format('woff2-variations'), url('../fonts/Inter-Variable-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ========== BACKGROUND LAYERS (Linear-based) ========== */ --color-bg-page: #08090a; --color-bg-surface-1: #0f1011; --color-bg-surface-2: #191a1b; --color-bg-elevated: #222326; --color-bg-overlay: rgba(0, 0, 0, 0.6); /* ========== BORDERS ========== */ --color-border-subtle: #1f2023; --color-border-default: #23252a; --color-border-strong: #34343a; --color-border-focus: #5e6ad2; /* ========== TEXT ========== */ --color-text-primary: #f7f8f8; --color-text-secondary: #d0d6e0; --color-text-tertiary: #8a8f98; --color-text-disabled: #62666d; --color-text-inverse: #08090a; /* ========== ACCENT / BRAND (Linear Indigo — D-03) ========== */ --color-accent: #5e6ad2; --color-accent-hover: #7170ff; --color-accent-active: #828fff; --color-accent-subtle: rgba(94, 106, 210, 0.12); --color-accent-muted: rgba(94, 106, 210, 0.24); --color-accent-text: #a5b0ff; /* Light indigo for text on --color-accent-subtle backgrounds */ /* ========== SEMANTIC (Geist-dark-based) ========== */ --color-success: #2b8a3e; --color-success-bg: rgba(43, 138, 62, 0.12); --color-success-border: rgba(43, 138, 62, 0.32); --color-success-text: #4ade80; --color-warning: #f5a524; --color-warning-bg: rgba(245, 165, 36, 0.12); --color-warning-border: rgba(245, 165, 36, 0.32); --color-warning-text: #fbbf24; --color-danger: #e5484d; --color-danger-bg: rgba(229, 72, 77, 0.12); --color-danger-border: rgba(229, 72, 77, 0.36); --color-danger-text: #ff6369; --color-info: #0070f3; --color-info-bg: rgba(0, 112, 243, 0.12); --color-info-border: rgba(0, 112, 243, 0.32); --color-info-text: #52a8ff; /* ========== FOCUS RING ========== */ --color-focus-ring: #5e6ad2; --color-focus-ring-alpha: rgba(94, 106, 210, 0.4); /* ========== ALPHA OVERLAYS ========== */ --color-hover-bg: rgba(255, 255, 255, 0.06); --color-hover-bg-strong: rgba(255, 255, 255, 0.09); --color-active-bg: rgba(255, 255, 255, 0.13); /* ========== TYPOGRAPHY ========== */ --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Inter Variable', var(--font-sans); --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 32px; --leading-none: 1.0; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.7; --weight-regular: 400; --weight-medium: 510; --weight-semibold: 590; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ========== SPACING (4px grid) ========== */ --space-0: 0; --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ========== RADIUS ========== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ========== SHADOWS ========== */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.5); --shadow-inner: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3); /* ========== MOTION (D-05: Framer-like) ========== */ --duration-instant: 0ms; --duration-fast: 120ms; --duration-base: 150ms; --duration-slow: 200ms; --duration-slower: 300ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ========== TABLE DENSITY (D-04: dense only, no toggle) ========== */ --table-row-h: 32px; --table-header-h: 36px; --table-cell-py: 8px; --table-cell-px: 12px; } /* Tabular numerals utility (D-07): apply to td.num, .metric-value, numeric inputs, odds columns */ .tabular, td.num, .metric-value, input[inputmode="numeric"] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* Reduced motion fallback (D-05 requirement) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }