/* Shared design tokens for the Secure platform. Single source of truth — linked by both index.html and login.html. Light is the default; dark is opted into via , persisted in localStorage.axis_theme. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Light theme (default) */ color-scheme: light; --bg: #f5f6f8; --surface: #ffffff; --surface-alt: #f8f9fb; --surface-hover:#f0f2f5; --border: #e4e7ec; --border-strong:#d1d5db; --text: #0f1419; --text-strong: #000000; --muted: #6b7280; --muted-strong: #4b5563; --accent: #3B82F6; --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent); --accent-hover: #2563EB; --online: #16a34a; --online-soft: color-mix(in srgb, var(--online) 10%, transparent); --offline: #dc2626; --offline-soft: color-mix(in srgb, var(--offline) 10%, transparent); --warn: #d97706; --warn-soft: color-mix(in srgb, var(--warn) 10%, transparent); --setup: #2563eb; --setup-soft: color-mix(in srgb, var(--setup) 10%, transparent); --shadow-sm: 0 1px 2px rgba(15,20,25,0.04); --shadow: 0 1px 3px rgba(15,20,25,0.06), 0 1px 2px rgba(15,20,25,0.04); --shadow-lg: 0 10px 30px rgba(15,20,25,0.10), 0 4px 8px rgba(15,20,25,0.05); --shadow-focus: 0 0 0 3px rgba(59,130,246,0.22); --thumb-bg: #0c1014; /* Semantic alias — destructive/danger UI. Tracks --offline per-theme. */ --danger: var(--offline); /* Category/brand-neutral accents (charts, icons, type tags). */ --purple: #6b3bff; --purple-soft: color-mix(in srgb, var(--purple) 10%, transparent); --teal: #0d9488; --indigo: #6366f1; --indigo-soft: color-mix(in srgb, var(--indigo) 12%, transparent); /* Overlay scrim behind modals/drawers/palettes — one value everywhere. */ --backdrop: rgba(15,20,25,0.38); /* Shell layout constants (box-sizing: border-box, so these are total heights). */ --topbar-h: 60px; /* ── Type scale ── steps match the sizes the app actually uses, so adopting the token is visually near-lossless. Use these, not raw px. */ --fs-2xs: 10.5px; /* micro labels, pill text */ --fs-xs: 11.5px; /* secondary labels, table meta */ --fs-sm: 12.5px; /* body-small, descriptions, buttons */ --fs-md: 13px; /* default body */ --fs-lg: 14px; /* emphasized body, inputs on login */ --fs-xl: 15px; /* card titles */ --fs-2xl: 18px; /* page/section headings */ --fs-3xl: 22px; /* stat numbers */ --fs-4xl: 26px; /* hero numbers */ /* ── Radius scale ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-full: 999px; /* pills */ /* ── Spacing scale (4px base) — for new code; legacy values migrate over time. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* ── Motion ── one duration family + one easing so everything moves alike. */ --dur-fast: 0.12s; /* hovers, small state flips */ --dur: 0.18s; /* overlays, reveals */ --dur-slow: 0.24s; /* drawers, larger movement */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; } [data-theme="dark"] { color-scheme: dark; --bg: #0a0c10; --surface: #14171c; --surface-alt: #1a1d24; --surface-hover:#202530; --border: rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.14); --text: #e8eaf0; --text-strong: #ffffff; --muted: #8b93a3; --muted-strong: #a8b0c0; --accent: #60A5FA; --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-hover: #93C5FD; --online: #22c55e; --online-soft: color-mix(in srgb, var(--online) 14%, transparent); --offline: #ef4444; --offline-soft: color-mix(in srgb, var(--offline) 14%, transparent); --warn: #f59e0b; --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent); --setup: #3b82f6; --setup-soft: color-mix(in srgb, var(--setup) 14%, transparent); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-lg: 0 12px 36px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); --shadow-focus: 0 0 0 3px rgba(96,165,250,0.28); --thumb-bg: #05070a; /* Category accents brighten for dark surfaces. */ --purple: #8b6bff; --teal: #2dd4bf; --indigo: #818cf8; --backdrop: rgba(0,0,0,0.55); }