/* ============================================================ Agentic OS — Design Tokens Extracted from the reference UI kit (Inter, indigo/violet accent, 8px spacing grid, deep-navy neutral scale). Light + dark themes via [data-theme] on . ── Ink / fill / soft ─────────────────────────────────────── One colour cannot do two jobs. #22c55e reads fine as a status dot on white and is invisible as text on white — 2.28:1, where AA asks 4.5. So every semantic splits three ways: --x FILL. Dots, meters, bars, solid buttons. Bright. Do not darken these: styles.css hardcodes dark ink on --warning and --success fills. --x-ink TEXT. >= 4.5:1 on every surface it can land on, which for the dark theme is --surface-3 and for the light theme is also --surface-3. Also used for borders that carry meaning. --x-soft TINT. Background wash behind ink of the same hue. Ratios were measured against all four grounds (bg, surface, surface-2, surface-3), not just one, and test/design-tokens.test.js fails the build if any pair drops below its floor. Change a value there and here together, never here alone. ============================================================ */ :root { /* --- Brand / primary (violet) --- */ --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-800: #5b21b6; --violet-900: #4c1d95; /* --- Semantic fills (theme-independent; see the ink/fill note above) --- */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.12); --success-soft: rgba(34, 197, 94, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --warning-soft: rgba(245, 158, 11, 0.12); --error: #ef4444; --error-bg: rgba(239, 68, 68, 0.12); --error-soft: rgba(239, 68, 68, 0.12); --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.12); --info-soft: rgba(59, 130, 246, 0.12); --cyan: #06b6d4; /* Scout teal — CVD-validated so the fleet palette never hinges on violet-vs-blue, which is indistinguishable under deuteranopia. */ --teal: #0d9488; --teal-soft: rgba(13, 148, 136, 0.12); /* --- Typography --- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 40px; --text-4xl: 56px; /* --- Spacing (8px grid) --- */ --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-14: 56px; /* --- Radius --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-full: 999px; /* --- Layout --- */ /* Rail + section column. The rail is fixed; the sidebar total varies with the breakpoint, which is why both are named. */ --rail-w: 68px; --sidebar-w: 252px; --topbar-h: 64px; /* What the bar actually occupies once it has cleared the notch. Every layout that fills "the rest of the screen" subtracts this, not --topbar-h, or it ends up taller than the space it was given by exactly the inset. */ --topbar-total: calc(var(--topbar-h) + var(--safe-t)); --tabbar-h: 60px; --maxw: 1600px; /* --- Breakpoints --- Four, and only four. Media queries cannot read a custom property, so these are documentation the stylesheet is expected to honour — there had been seventeen ad-hoc widths (560 620 640 700 720 760 800 820 900 1050 1060 1100 1120 1150 1180 1200 1280) and no way to tell which was deliberate. 640 phone — one column, drawer navigation, wrapped rows 900 tablet — sidebar leaves the flow 1280 desktop — the full multi-column layouts 1680 wide — room for a third column */ /* --- Telegram Mini App --- Telegram's container is not the browser viewport: it has a header of its own, it can be collapsed, and it resizes as the keyboard opens. viewportStableHeight is the one measurement that does not flicker while that happens, and the bridge writes it here. Outside Telegram nothing sets it and the fallback is the ordinary dynamic viewport. */ --tg-viewport: 100dvh; /* --- Safe areas --- Named rather than used inline so a layout can be tested: a probe can set --safe-b and see the shell respond, which env() alone does not allow. Non-zero only with viewport-fit=cover, which index.html sets. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); /* --- Motion --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 160ms; } /* ---------------- Dark theme (default) ---------------- */ :root, :root[data-theme="dark"] { /* Native controls the page does not paint: