/* ============================================================================ Depth design system — VybeCode binding (vendored) ---------------------------------------------------------------------------- Source of truth: C:\DEV\depth-design-system (tokens/tokens.css + DESIGN-PRINCIPLES.md). A dark precision-instrument language: ONE grey hue (264) at low chroma, depth from a SINGLE top light source, OKLCH color. VybeCode adaptation: each product keeps its signature PRIMARY accent, remapped onto Depth's --ember role via [data-product]. --vector (info/agent), --good and --violet stay Depth-canonical across all four products. Back-compat aliases (bottom of :root) map the old VybeCode token names onto Depth roles, so existing component CSS adopts Depth with no churn. Fonts (Geist + JetBrains Mono) are loaded by the host page. ========================================================================= */ :root { /* ---- Depth canonical greys (OKLCH authoritative on the web) ---- */ --bg: oklch(0.215 0.003 264); /* app background / deepest surface */ --chrome: oklch(0.275 0.003 264); /* primary panel surface */ --chrome-2: oklch(0.315 0.003 264); /* raised panel / tile */ --chrome-3: oklch(0.345 0.003 264); /* overlay / hover / highest */ --inset: oklch(0.205 0.003 264); /* recessed well (darker than bg) */ --line: oklch(0.380 0.004 264); /* primary border / divider */ --line-soft: oklch(0.330 0.004 264); /* subtle divider */ --ink: oklch(0.965 0.003 264); /* primary text / icons */ --ink-dim: oklch(0.780 0.004 264); /* secondary text */ --ink-faint: oklch(0.600 0.005 264); /* tertiary / labels / disabled */ /* light work-surface group (the user's artboard/preview — NOT app chrome) */ --canvas: oklch(0.93 0.002 264); --canvas-2: oklch(0.965 0.002 264); --canvas-ink: oklch(0.42 0.004 264); --canvas-faint: oklch(0.58 0.004 264); /* ---- accents: --ember (PRIMARY) is overridden per product below ---- */ --ember: oklch(0.66 0.20 40); /* default = Depth ember-orange */ --ember-hi: oklch(0.745 0.185 47); --ember-lo: oklch(0.565 0.19 38); --ember-ink: oklch(1 0 0 / 0.98); /* text/icon ON the accent face */ --vector: oklch(0.62 0.13 222); /* SECONDARY accent (info / agent) */ --vector-hi: oklch(0.78 0.12 215); --good: oklch(0.70 0.15 150); /* success */ --violet: oklch(0.62 0.16 300); /* tertiary / special */ /* subtle accent-tint surfaces, derived from the live --ember per product */ --accent-tint: color-mix(in oklab, var(--ember) 14%, var(--inset)); --accent-tint-2: color-mix(in oklab, var(--ember) 24%, var(--inset)); --accent-tint-ln: color-mix(in oklab, var(--ember) 40%, var(--chrome)); /* ---- elevation: single top light source ---- */ --raise-sm: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 1px 1px oklch(0 0 0 / 0.28), 0 1px 2px oklch(0 0 0 / 0.22); --raise: inset 0 1px 0 oklch(1 0 0 / 0.09), 0 1px 2px oklch(0 0 0 / 0.30), 0 4px 9px -3px oklch(0 0 0 / 0.45); --raise-lg: inset 0 1px 0 oklch(1 0 0 / 0.11), 0 2px 4px oklch(0 0 0 / 0.30), 0 12px 26px -8px oklch(0 0 0 / 0.55); --recess: inset 0 1px 3px oklch(0 0 0 / 0.45), inset 0 -1px 0 oklch(1 0 0 / 0.05); --recess-deep: inset 0 2px 6px oklch(0 0 0 / 0.50), inset 0 -1px 0 oklch(1 0 0 / 0.05); --cast-r: 3px 0 9px -3px oklch(0 0 0 / 0.5); --cast-l: -3px 0 9px -3px oklch(0 0 0 / 0.5); --cast-d: 0 3px 9px -3px oklch(0 0 0 / 0.5); /* ---- radius / spacing / type / motion ---- */ --r-sm: 6px; --r-md: 8px; --r-lg: 11px; --r-xl: 13px; --r-pill: 999px; --s-1: 4px; --s-2: 7px; --s-3: 10px; --s-4: 13px; --s-5: 16px; --s-6: 22px; --s-8: 32px; --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --motion-base: 180ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --rail: 56px; /* ---- back-compat aliases: old VybeCode token names -> Depth roles ---- existing component CSS keeps working and inherits the Depth system. */ --bg-deep: var(--bg); --bg-base: var(--chrome); --bg-surface: var(--chrome-2); --bg-elevated: var(--chrome-3); --bg-hover: var(--chrome-3); --border-subtle: var(--line-soft); --border-default: var(--line); --border-strong: var(--line); --text-primary: var(--ink); --text-secondary: var(--ink-dim); --text-muted: var(--ink-faint); --text-inverse: var(--ember-ink); --accent-400: var(--ember-lo); --accent-500: var(--ember); --accent-600: var(--ember-hi); --accent-700: var(--ember-hi); --accent-50: var(--accent-tint); --accent-100: var(--accent-tint-2); --accent-200: var(--accent-tint-ln); --success: var(--good); --success-muted: color-mix(in oklab, var(--good) 16%, var(--inset)); --warning: oklch(0.80 0.12 80); --warning-muted: color-mix(in oklab, oklch(0.80 0.12 80) 16%, var(--inset)); --error: oklch(0.66 0.18 25); --error-muted: color-mix(in oklab, oklch(0.66 0.18 25) 16%, var(--inset)); --info: var(--vector); --info-muted: color-mix(in oklab, var(--vector) 16%, var(--inset)); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-full: var(--r-pill); --shadow-sm: var(--raise-sm); --shadow-md: var(--raise); --shadow-lg: var(--raise-lg); --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 16px; --space-5: 20px; --space-6: 22px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --text-xs: 10px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --duration-fast: 100ms; --duration-normal: 180ms; --duration-slow: 250ms; --easing-default: var(--ease); } /* ---- per-product PRIMARY accent (remapped onto --ember) ---- */ [data-product="spectre"] { --ember: #40d0c0; --ember-hi: #70e0d4; --ember-lo: #2eb8a8; --ember-ink: #08201d; } [data-product="dsp"] { --ember: #6e72f8; --ember-hi: #9296fc; --ember-lo: #5558e0; --ember-ink: #ffffff; } [data-product="ui"] { --ember: #f078b4; --ember-hi: #f4a0cc; --ember-lo: #e45c9c; --ember-ink: #2a0c1c; } [data-product="unite"] { --ember: #f0a800; --ember-hi: #ffc63a; --ember-lo: #c08400; --ember-ink: #231806; } /* ---- light variant: chrome becomes light "paper" (canvas group) ---- Depth is dark-first; this keeps the existing light toggle coherent. */ [data-theme="light"] { --bg: var(--canvas); --chrome: #ffffff; --chrome-2: oklch(0.975 0.002 264); --chrome-3: oklch(0.955 0.002 264); --inset: oklch(0.905 0.003 264); --line: oklch(0.855 0.004 264); --line-soft: oklch(0.905 0.004 264); --ink: var(--canvas-ink); --ink-dim: oklch(0.50 0.004 264); --ink-faint: var(--canvas-faint); --raise-sm: 0 1px 2px oklch(0 0 0 / 0.08); --raise: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 10px -3px oklch(0 0 0 / 0.12); --raise-lg: 0 2px 4px oklch(0 0 0 / 0.06), 0 12px 26px -8px oklch(0 0 0 / 0.16); --recess: inset 0 1px 3px oklch(0 0 0 / 0.10), inset 0 -1px 0 oklch(1 0 0 / 0.6); --recess-deep: inset 0 2px 6px oklch(0 0 0 / 0.14); --cast-r: 3px 0 9px -3px oklch(0 0 0 / 0.14); --cast-l: -3px 0 9px -3px oklch(0 0 0 / 0.14); --cast-d: 0 3px 9px -3px oklch(0 0 0 / 0.14); } /* deeper, higher-contrast primary accents on the light surface */ [data-theme="light"][data-product="spectre"] { --ember: #0e8878; --ember-hi: #12a08c; --ember-lo: #0a6e62; --ember-ink: #ffffff; } [data-theme="light"][data-product="dsp"] { --ember: #4338ca; --ember-hi: #4f46e5; --ember-lo: #3730a3; --ember-ink: #ffffff; } [data-theme="light"][data-product="ui"] { --ember: #be1870; --ember-hi: #d4408c; --ember-lo: #9e1060; --ember-ink: #ffffff; } [data-theme="light"][data-product="unite"] { --ember: #a06c00; --ember-hi: #c08000; --ember-lo: #845800; --ember-ink: #ffffff; } /* ============================================================================ Base + the .depth-* component atoms (panel · tile · well · button · seg · pill · icon · field · label · mono). Compose these; don't invent surfaces. ========================================================================= */ * { box-sizing: border-box; } .depth, .depth-root { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .depth-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .depth-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); display: block; } /* surfaces */ .depth-panel { background: linear-gradient(180deg, var(--chrome-2), var(--chrome)); border-radius: var(--r-xl); box-shadow: var(--raise-lg); padding: 16px; } .depth-tile { background: var(--chrome-2); border-radius: var(--r-lg); box-shadow: var(--raise); padding: 13px; } .depth-well { background: var(--inset); border-radius: var(--r-md); box-shadow: var(--recess); } /* buttons */ .depth-btn { border: 0; cursor: pointer; border-radius: var(--r-md); padding: 9px 15px; color: var(--ember-ink); font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--ember-hi), var(--ember-lo)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .25), 0 1px 2px oklch(0 0 0 / .4), 0 6px 14px -4px color-mix(in oklab, var(--ember-lo) 55%, transparent); transition: filter var(--motion-base) var(--ease), transform var(--motion-base) var(--ease); } .depth-btn:hover:not(:disabled) { filter: brightness(1.06); } .depth-btn:active:not(:disabled) { box-shadow: var(--recess); transform: translateY(1px); } .depth-btn:disabled { opacity: .45; cursor: not-allowed; } .depth-btn-soft { color: var(--ink); background: linear-gradient(180deg, var(--chrome-3), var(--chrome-2)); box-shadow: var(--raise); } .depth-btn-soft:hover:not(:disabled) { background: var(--chrome-3); filter: none; } .depth-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); color: var(--ink-dim); cursor: pointer; background: var(--chrome-2); box-shadow: var(--raise-sm); border: 0; transition: color var(--motion-base) var(--ease), background var(--motion-base) var(--ease); } .depth-icon:hover { color: var(--ink); background: var(--chrome-3); } /* segmented control */ .depth-seg { display: inline-flex; background: var(--inset); border-radius: var(--r-lg); padding: 3px; gap: 3px; box-shadow: var(--recess); } .depth-seg button { font-family: inherit; font-size: 12px; color: var(--ink-dim); background: transparent; border: 0; padding: 5px 13px; border-radius: var(--r-sm); cursor: pointer; } .depth-seg button.on { background: linear-gradient(180deg, var(--chrome-3), var(--chrome-2)); color: var(--ink); box-shadow: var(--raise-sm); } /* pill (secondary action — vector/teal) */ .depth-pill { display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer; border-radius: var(--r-xl); padding: 11px 16px; color: oklch(1 0 0 / .98); font-family: var(--font-sans); font-weight: 600; font-size: 13px; background: linear-gradient(180deg, var(--vector-hi), var(--vector)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .25), 0 2px 4px oklch(0 0 0 / .4), 0 9px 22px -5px color-mix(in oklab, var(--vector) 55%, transparent); } /* input */ .depth-field { width: 100%; background: var(--inset); color: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--recess); font-family: var(--font-mono); font-size: 11.5px; padding: 8px 10px; outline: none; } .depth-field:focus { border-color: color-mix(in oklab, var(--ember) 60%, var(--line)); } /* scrollbar + reduced motion */ .depth-root ::-webkit-scrollbar { width: 10px; height: 10px; } .depth-root ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid var(--chrome); } .depth-root ::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }