/* ============================================================================= MacroInsight v2 — design tokens ----------------------------------------------------------------------------- Palette and surface treatment adopted from Beautiful UI by Turbo (https://beautiful-ui-five.vercel.app), whose values were read off the live site. That library is a Next.js/React showcase with no distributed package, so this is its visual language re-expressed in our own token names — the 1,411 existing --v2-* / legacy call sites keep working unchanged. Dark is the only theme. data-scheme='dark' is still stamped on because sheets across the v2 layer hang rules off it; it is a constant. What changed vs the previous "Nocturne" values ---------------------------------------------- - Greys are warmer and a step lighter (#1c1d1f canvas, not #0C0E11). Less pure black, which reads as a product rather than a terminal. - Separation is a SHADOW, not a border: `0 0 0 1px` hairlines. They do not take part in layout, so nothing shifts by a pixel when an element gains or loses one, and adjacent hairlines do not double up. - Accent is blue (#3d9aff) rather than indigo. - Semantic colours carry a matching low-alpha tint for fills. ========================================================================== */ html[data-ui='v2'] { color-scheme: dark; /* ---- Surface ---------------------------------------------------------- Five steps. `page` is the shell behind everything, `canvas` the scrolling content area, `surface` a card, `inset` a well, `field` an input. */ --v2-page: #17181A; --v2-canvas: #1C1D1F; --v2-surface: #232427; --v2-sunk: #1F2022; /* wells, table headers */ --v2-sunk-2: #2B2C2F; /* pressed / selected / field fills */ --v2-hover: #2A2B2E; --v2-hover-2: #313236; /* Hairlines. Prefer the shadow tokens below over a real border. */ --v2-line: #2E3033; --v2-line-2: #3A3C40; /* ---- Ink -------------------------------------------------------------- Three real steps plus a disabled tier. */ --v2-ink: #F2F3F4; --v2-ink-2: #A5A8AD; --v2-ink-3: #6C6F75; --v2-ink-4: #55585D; /* disabled only, never body text */ /* ---- Accent — interactive only ---------------------------------------- */ --v2-accent: #3D9AFF; --v2-accent-hover: #5CACFF; --v2-accent-ink: #0B1420; --v2-accent-text: #7EC0FF; /* accent as foreground on dark */ --v2-accent-soft: #3D9AFF29; --v2-accent-line: #3D9AFF4D; /* ---- Data semantics — data only, never chrome ------------------------- */ --v2-bull: #3DBB72; --v2-bull-soft: #3DBB7224; --v2-bear: #EE5C61; --v2-bear-soft: #EE5C6124; --v2-chop: #A5A8AD; --v2-chop-soft: #FFFFFF0E; --v2-warn: #F68F3C; --v2-warn-soft: #F68F3C24; --v2-info: #3D9AFF; --v2-info-soft: #3D9AFF24; /* ---- Elevation -------------------------------------------------------- Hairline-as-shadow. `e1` is the default card treatment: a 1px ring plus a whisper of depth. Reach for a real border only when the line must occupy layout (a divider between rows, say). */ --v2-e0: none; --v2-hairline: 0 0 0 1px var(--v2-line); --v2-e1: 0 0 0 1px #2E3033, 0 1px 2px #00000033, 0 2px 6px #00000033; --v2-e2: 0 0 0 1px #2E3033, 0 2px 10px #00000038; --v2-e3: 0 0 0 1px #3A3C40, 0 8px 28px #00000057; --v2-e-btn: 0 0 0 1px #3A3C40, 0 1px 2px #0000004D; --v2-e-field: inset 0 1px 2px #00000066; --v2-ring: 0 0 0 3px #3D9AFF40; /* Zebra striping for dense tables. */ --v2-stripe: #FFFFFF0E; --v2-stripe-bg: #1B1C1E; /* ---- Shape ------------------------------------------------------------ */ --v2-r-xs: 4px; --v2-r-sm: 6px; /* chips */ --v2-r-md: 8px; /* controls */ --v2-r-lg: 10px; /* cards */ --v2-r-xl: 14px; --v2-r-pill: 999px; /* ---- Type ------------------------------------------------------------- */ --v2-sans: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif; --v2-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --v2-t-xs: 12px; --v2-t-sm: 13px; --v2-t-md: 14px; /* base */ --v2-t-lg: 16px; --v2-t-xl: 20px; --v2-t-2xl: 26px; --v2-t-3xl: 34px; --v2-t-4xl: 48px; --v2-tight: -0.011em; --v2-tighter: -0.022em; --v2-wide: 0.025em; /* ---- Space — 4px scale ------------------------------------------------ */ --v2-s1: 4px; --v2-s2: 8px; --v2-s3: 12px; --v2-s4: 16px; --v2-s5: 20px; --v2-s6: 24px; --v2-s7: 32px; --v2-s8: 40px; --v2-s9: 56px; /* ---- Shell ------------------------------------------------------------ */ --v2-rail: 64px; --v2-rail-open: 244px; --v2-topbar: 56px; --v2-page-max: 1400px; --v2-gutter: clamp(20px, 3vw, 48px); /* ---- Motion ----------------------------------------------------------- */ --v2-ease: cubic-bezier(0.4, 0, 0.2, 1); --v2-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --v2-ease-link: cubic-bezier(0.16, 1, 0.3, 1); --v2-fast: 150ms; --v2-med: 220ms; /* ========================================================================= Bridge onto the tokens style.css already consumes (1,411 call sites). ====================================================================== */ --bg: var(--v2-canvas); --bg-2: var(--v2-surface); --panel: var(--v2-surface); --panel-2: var(--v2-sunk); --panel-3: var(--v2-sunk-2); --border: var(--v2-line); --border-strong: var(--v2-line-2); --text: var(--v2-ink); --text-dim: var(--v2-ink-2); --text-faint: var(--v2-ink-3); --text-primary: var(--v2-ink); --text-secondary: var(--v2-ink-2); --text-muted: var(--v2-ink-2); --bull: var(--v2-bull); --bull-glow: var(--v2-bull-soft); --bear: var(--v2-bear); --bear-glow: var(--v2-bear-soft); --chop: var(--v2-chop); --chop-glow: var(--v2-chop-soft); --accent: var(--v2-accent); --accent-glow: var(--v2-accent-soft); --shadow: none; --shadow-soft: none; --radius: var(--v2-r-lg); --radius-sm: var(--v2-r-sm); --font-sans: var(--v2-sans); --font-mono: var(--v2-mono); --sidebar-expanded-width: var(--v2-rail-open); --sidebar-rail-width: var(--v2-rail); } html[data-ui='v2'] body.app, html[data-ui='v2'][data-v2] body { background: var(--v2-canvas); color: var(--v2-ink); }