/* ============================================================ MACHINESENS — DESIGN TOKENS tokens.css — imported first by main.css ============================================================ */ :root { /* ── Background Stack ──────────────────────────────────── */ --bg-base: #09090b; /* Page background */ --bg-surface: #111113; /* Cards, sidebar */ --bg-elevated: #18181b; /* Nested elements, inputs */ --bg-overlay: #1f1f23; /* Dropdowns, tooltips */ --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.07); /* ── Borders ───────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); /* ── Text ──────────────────────────────────────────────── */ --text-primary: #fafafa; --text-secondary: rgba(250, 250, 250, 0.55); --text-tertiary: rgba(250, 250, 250, 0.30); --text-disabled: rgba(250, 250, 250, 0.18); /* ── Accent ────────────────────────────────────────────── */ --accent-primary: #7c6af7; --accent-glow: rgba(124, 106, 247, 0.18); --accent-muted: rgba(124, 106, 247, 0.12); /* ── Status Colors ─────────────────────────────────────── */ --green: #22c55e; --green-bg: rgba(34, 197, 94, 0.10); --green-border: rgba(34, 197, 94, 0.20); --red: #f87171; --red-bg: rgba(248, 113, 113, 0.10); --red-border: rgba(248, 113, 113, 0.20); --amber: #fbbf24; --amber-bg: rgba(251, 191, 36, 0.10); --amber-border: rgba(251, 191, 36, 0.20); --blue: #60a5fa; --blue-bg: rgba(96, 165, 250, 0.10); /* ── Border Radius ─────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ───────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.60); --shadow-glow: 0 0 40px rgba(124, 106, 247, 0.12); /* ── Layout ────────────────────────────────────────────── */ --nav-width: 220px; --header-h: 56px; /* ── Typography ────────────────────────────────────────── */ --font-sans: 'DM Sans', sans-serif; --font-mono: 'Geist Mono', monospace; --font-serif: 'Instrument Serif', serif; /* ── Easing ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-fast: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ LIGHT THEME html.theme-light overrides every token. Design decisions: ─ Base is #f6f6f9 — a barely-there cool white. Pure #fff as a page bg reads as "blank document", not "product". ─ Surface (cards) is true white — gives cards clear lift off the base without needing heavy shadows. ─ Borders are solid, not alpha-white-on-white — far more readable, especially on low-contrast displays. ─ Text hierarchy uses ink-black (#0f0f12) → slate for secondary/tertiary — not grey-on-grey which collapses. ─ Accent is #5b4de0 — one step darker than dark-mode #7c6af7, hitting WCAG AA on white at normal font sizes. ─ Status greens/reds are forest/crimson, NOT the washed-out pastel versions most light themes use. They stay readable. ─ Shadows use a warm navy base (not pure black) — makes card depth feel real rather than cheap. ─ Sidebar gets a very slightly tinted surface (#fafafe) to separate it from main content without a heavy border. ============================================================ */ html.theme-light { /* ── Backgrounds ───────────────────────────────────────── Each step is clearly distinguishable — no muddy greys. */ --bg-base: #f0f0f5; /* Page canvas — cool off-white */ --bg-surface: #ffffff; /* Cards, sidebar, panels */ --bg-elevated: #f5f5f9; /* Inputs, inline tags, nested */ --bg-overlay: #eaeaf0; /* Dropdowns, tooltips */ --bg-hover: rgba(15, 15, 40, 0.04); --bg-active: rgba(15, 15, 40, 0.07); /* ── Borders — solid, not alpha stacks ──────────────────── */ --border-subtle: #e4e4eb; --border-default: #d4d4de; --border-strong: #b8b8c8; /* ── Text — ink-based, proper contrast ratios ───────────── */ --text-primary: #0f0f14; /* 18:1 on white — crisp */ --text-secondary: #52526b; /* 7:1 — readable labels */ --text-tertiary: #8888a4; /* 4.5:1 — captions, timestamps */ --text-disabled: #b0b0c4; /* Intentionally low — disabled */ /* ── Accent — deepened for WCAG AA on white ─────────────── */ --accent-primary: #5b4de0; --accent-glow: rgba(91, 77, 224, 0.12); --accent-muted: rgba(91, 77, 224, 0.08); /* ── Status — saturated, not washed out ─────────────────── */ --green: #15803d; /* Forest green — 6:1 on white */ --green-bg: #f0fdf4; /* Very pale mint surface */ --green-border: #bbf7d0; /* Clear, not muddy */ --red: #b91c1c; /* Crimson — 6.5:1 on white */ --red-bg: #fff1f1; /* Blush surface */ --red-border: #fecaca; --amber: #92400e; /* Deep amber — 7:1 on white */ --amber-bg: #fffbeb; /* Cream surface */ --amber-border: #fde68a; --blue: #1d4ed8; /* Royal blue — 7:1 on white */ --blue-bg: #eff6ff; /* ── Shadows — warm navy base, layered depth ────────────── */ --shadow-sm: 0 1px 2px rgba(15, 15, 40, 0.06), 0 1px 4px rgba(15, 15, 40, 0.04); --shadow-md: 0 2px 8px rgba(15, 15, 40, 0.07), 0 6px 20px rgba(15, 15, 40, 0.05); --shadow-lg: 0 4px 16px rgba(15, 15, 40, 0.08), 0 16px 48px rgba(15, 15, 40, 0.08); --shadow-glow: 0 0 32px rgba(91, 77, 224, 0.12); } /* ── Smooth theme transition ───────────────────────────────── 200ms on bg/border/color only — layout properties excluded. */ *, *::before, *::after { transition: background-color 0.18s var(--ease-fast), border-color 0.18s var(--ease-fast), color 0.12s var(--ease-fast), fill 0.12s var(--ease-fast), box-shadow 0.18s var(--ease-fast); } /* Restore proper transitions on animated elements */ .ring-fill { transition: stroke-dashoffset 1.2s var(--ease-out) !important; } .sites-container { transition: max-height 0.35s var(--ease-out) !important; } .device-panel { transition: max-height 0.3s var(--ease-out) !important; } .health-bar-fill { transition: width 1s var(--ease-out) !important; } .icon-btn.spinning svg { transition: none !important; } .toast { transition: opacity 0.2s, transform 0.2s !important; }