/* ═══════════════════════════════════════════════════════════════ PrepTraX · Traxium · Ship-Trax — Unified Design Tokens (v2) Single source of truth across all three apps. Space Grotesk Display · Inter Body · JetBrains Mono Data. Load order: theme.css → traxium-design-system.css → page.css ═══════════════════════════════════════════════════════════════ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* All design tokens previously defined here have been migrated to css/0-tokens/. This file now contains only the body / focus-ring / utility rules and the dark-mode-specific overrides. */ /* Dark-mode tokens migrated to css/0-tokens/legacy.css */ /* ══════════════════════════════════════ GLOBAL BODY RESET Deep sapphire canvas with animated aurora mesh. ══════════════════════════════════════ */ body { font-family: var(--font-body); background-color: var(--bg); background-image: var(--grad-mesh); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Animated mesh — drifts slowly behind content */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grad-mesh); animation: ptxMeshDrift 26s ease-in-out infinite alternate; } @keyframes ptxMeshDrift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-2%,1%) scale(1.04); } } /* ══════════════════════════════════════ FOCUS RING — Electric Royal ══════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 3px; border-radius: 6px; } /* ══════════════════════════════════════ ICON SIZING NORMALIZATION ══════════════════════════════════════ */ [data-lucide] { width: 1em; height: 1em; stroke-width: 1.6; flex-shrink: 0; } .icon-xs { width: 12px; height: 12px; } .icon-sm { width: 14px; height: 14px; } .icon-md { width: 16px; height: 16px; } .icon-lg { width: 20px; height: 20px; } .icon-xl { width: 28px; height: 28px; } /* ═══════════════════════════════════════════════════════════════ CANONICAL TRAXIUM / PREPTRAX LOGO "Pt" tile with aurora gradient (violet → blue → cyan → magenta). Use