/* ══════════════════════════════════════════════════════════════════════ VELYRON · UI v2 — THE design system (single source of truth · Phase B) One token set, one component vocabulary, loaded on every page. Pages style from these tokens instead of redefining a palette; the shared shell (/velyron-shell.js) renders the chrome from them. Contracts (do not fork): · namespace is --v-* (velyron-switcher.js and the shell read these) · theme = data-theme="dark"|"light" on , persisted in localStorage 'vlr-theme'; no attribute → follow the system · the canonical signal is the oklch pair below; --signal stays as a TRANSITIONAL alias for pages not yet migrated off their local var ══════════════════════════════════════════════════════════════════════ */ :root{ /* rounded corner scale — every corner picks from these, never a one-off */ --v-r1:10px; /* chips, small controls, badges */ --v-r2:14px; /* buttons, inputs, fields */ --v-r3:20px; /* cards */ --v-r4:28px; /* panels, modals, sheets */ --v-pill:999px;/* pills, avatars, toggles */ /* type — one stack, one mono */ --v-font:'Space Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --v-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* spacing */ --v-pad:clamp(16px,4vw,40px); /* neutrals (dark-first) — cool-biased toward the signal, not flat grey */ --v-bg:#05070a; --v-surface:#0a0d12; --v-surface-2:#0f1319; --v-raised:#141a21; --v-fg:#eef1f4; --v-fg-dim:#8f969e; --v-fg-mute:#575e66; --v-line:rgba(255,255,255,.08); --v-line-2:rgba(255,255,255,.14); /* brand signal — the canonical teal (majority value platform-wide) */ --v-signal:oklch(0.86 0.08 210); --v-signal-ink:#04121a; --v-signal-soft:color-mix(in oklab, var(--v-signal) 14%, transparent); --v-signal-line:color-mix(in oklab, var(--v-signal) 42%, transparent); --v-signal-glow:color-mix(in oklab, var(--v-signal) 22%, transparent); /* semantic (separate from the accent) */ --v-warn:#e6b45f; --v-good:#83d9ab; --v-bad:#e68f8f; /* soft, layered shadows */ --v-shadow-sm:0 4px 14px -6px rgba(0,0,0,.45); --v-shadow:0 18px 44px -20px rgba(0,0,0,.55); --v-shadow-lg:0 30px 80px -30px rgba(0,0,0,.62); --v-ease:cubic-bezier(.4,0,.2,1); --signal:var(--v-signal); /* transitional alias for unmigrated pages */ color-scheme:dark; } @media (prefers-color-scheme: light){ :root{ --v-bg:#f6f7f9; --v-surface:#ffffff; --v-surface-2:#f0f2f5; --v-raised:#ffffff; --v-fg:#0c0f13; --v-fg-dim:#565d66; --v-fg-mute:#8a9199; --v-line:rgba(11,13,16,.10); --v-line-2:rgba(11,13,16,.16); --v-signal:oklch(0.56 0.13 233); --v-signal-ink:#ffffff; --v-shadow-sm:0 4px 12px -6px rgba(24,26,32,.16); --v-shadow:0 16px 40px -22px rgba(24,26,32,.22); --v-shadow-lg:0 28px 70px -30px rgba(24,26,32,.26); --v-warn:#b7791f; --v-good:#2f8f5f; --v-bad:#c85a5a; --signal:var(--v-signal); color-scheme:light; } } :root[data-theme="dark"]{ --v-bg:#05070a; --v-surface:#0a0d12; --v-surface-2:#0f1319; --v-raised:#141a21; --v-fg:#eef1f4; --v-fg-dim:#8f969e; --v-fg-mute:#575e66; --v-line:rgba(255,255,255,.08); --v-line-2:rgba(255,255,255,.14); --v-signal:oklch(0.86 0.08 210); --v-signal-ink:#04121a; --v-shadow-sm:0 4px 14px -6px rgba(0,0,0,.45); --v-shadow:0 18px 44px -20px rgba(0,0,0,.55); --v-shadow-lg:0 30px 80px -30px rgba(0,0,0,.62); --v-warn:#e6b45f; --v-good:#83d9ab; --v-bad:#e68f8f; --signal:var(--v-signal); color-scheme:dark; } :root[data-theme="light"]{ --v-bg:#f6f7f9; --v-surface:#ffffff; --v-surface-2:#f0f2f5; --v-raised:#ffffff; --v-fg:#0c0f13; --v-fg-dim:#565d66; --v-fg-mute:#8a9199; --v-line:rgba(11,13,16,.10); --v-line-2:rgba(11,13,16,.16); --v-signal:oklch(0.56 0.13 233); --v-signal-ink:#ffffff; --v-shadow-sm:0 4px 12px -6px rgba(24,26,32,.16); --v-shadow:0 16px 40px -22px rgba(24,26,32,.22); --v-shadow-lg:0 28px 70px -30px rgba(24,26,32,.26); --v-warn:#b7791f; --v-good:#2f8f5f; --v-bad:#c85a5a; --signal:var(--v-signal); color-scheme:light; } /* ── primitives (opt-in classes; the shell + migrated pages use these) ── */ .v-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;line-height:1;padding:11px 18px;border-radius:var(--v-r2);border:1px solid var(--v-line-2);background:var(--v-surface);color:var(--v-fg);cursor:pointer;text-decoration:none;transition:border-color .18s var(--v-ease),background .18s var(--v-ease),transform .12s var(--v-ease)} .v-btn:hover{border-color:var(--v-fg-mute);background:var(--v-surface-2)} .v-btn:active{transform:translateY(1px)} .v-btn:focus-visible{outline:2px solid var(--v-signal);outline-offset:2px} .v-btn--primary{background:var(--v-signal);color:var(--v-signal-ink);border-color:transparent;font-weight:600} .v-btn--primary:hover{filter:brightness(1.06);background:var(--v-signal)} .v-btn--ghost{background:transparent} .v-btn--pill{border-radius:var(--v-pill)} .v-card{background:var(--v-surface);border:1px solid var(--v-line);border-radius:var(--v-r3);padding:22px} .v-card--raised{box-shadow:var(--v-shadow)} .v-input{width:100%;font-family:inherit;font-size:14.5px;color:var(--v-fg);background:var(--v-surface);border:1px solid var(--v-line-2);border-radius:var(--v-r2);padding:12px 14px;outline:none;transition:border-color .18s var(--v-ease)} .v-input:focus{border-color:var(--v-signal)} .v-input::placeholder{color:var(--v-fg-mute)} .v-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--v-fg-dim);background:var(--v-surface-2);border:1px solid var(--v-line);border-radius:var(--v-pill);padding:6px 12px;white-space:nowrap} .v-chip--accent{color:var(--v-signal);background:var(--v-signal-soft);border-color:var(--v-signal-line)} /* ── UX-2: THE composer — one visual anatomy for the landing and AUGUR. Values are AUGUR's ACTUAL current anatomy (the glass-pill restyle that supersedes the old base block), translated to --v-* tokens. Behavior is NEVER shared — pages own their own JS. ── */ .v-composer{display:flex;align-items:flex-end;gap:10px;border:1px solid var(--v-line-2);background:color-mix(in oklab, var(--v-surface) 88%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:9px 9px 9px 22px;box-shadow:0 12px 44px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.015);transition:border-color .25s,box-shadow .25s} .v-composer:focus-within{border-color:color-mix(in oklab, var(--v-signal) 26%, var(--v-line-2));box-shadow:0 14px 54px rgba(0,0,0,0.5)} .v-composer input,.v-composer textarea{flex:1;resize:none;border:none;background:transparent;color:var(--v-fg);font-family:inherit;font-size:15px;line-height:1.5;outline:none;min-width:0;padding:7px 0} .v-composer input::placeholder,.v-composer textarea::placeholder{color:var(--v-fg-mute)} .v-send{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--v-fg);color:var(--v-bg);border:none;padding:0;cursor:pointer;border-radius:50%;transition:background .2s var(--v-ease),box-shadow .2s var(--v-ease),transform .12s var(--v-ease)} .v-send:hover:not(:disabled){background:var(--v-signal);box-shadow:0 0 28px var(--v-signal-glow);transform:translateY(-1px)} .v-send:active:not(:disabled){transform:translateY(0)} .v-send:disabled{opacity:0.35;cursor:not-allowed} .v-send svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} /* modal — a centered sheet on a scrim; pages toggle [hidden] on the scrim */ .v-modal-scrim{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--v-pad)} .v-modal-scrim[hidden]{display:none} .v-modal{width:min(520px,100%);max-height:min(82vh,720px);overflow:auto;background:var(--v-raised);border:1px solid var(--v-line);border-radius:var(--v-r4);box-shadow:var(--v-shadow-lg);padding:26px} /* toast — bottom-centered transient note; .v-toast--on shows it */ .v-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:1300;background:var(--v-raised);color:var(--v-fg);border:1px solid var(--v-line-2);border-radius:var(--v-r2);box-shadow:var(--v-shadow);padding:11px 18px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s var(--v-ease),transform .2s var(--v-ease)} .v-toast--on{opacity:1;transform:translate(-50%,0)} .v-toast--err{border-color:color-mix(in srgb,var(--v-bad) 55%,transparent);color:var(--v-bad)} /* ── UI-2B-1: shared state primitives (loading / empty / error) ── */ .v-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 0} .v-loading-ring{width:44px;height:44px;border-radius:50%;border:2px solid var(--v-line-2);border-top-color:var(--v-signal);animation:v-spin .8s linear infinite} .v-loading-t{font-family:var(--v-mono);font-size:12.5px;letter-spacing:.04em;color:var(--v-fg-dim)} @keyframes v-spin{to{transform:rotate(360deg)}} .v-empty{padding:16px;border:1px dashed var(--v-line-2);border-radius:var(--v-r3);font-size:13px;line-height:1.6;color:var(--v-fg-dim)} .v-empty b{color:var(--v-fg)} .v-empty-act{display:inline-block;margin-left:8px;color:var(--v-signal);text-decoration:none;font-weight:600} .v-error{padding:12px 14px;border-left:2px solid var(--v-bad);font-size:13px;line-height:1.6;color:var(--v-fg-dim);background:color-mix(in srgb,var(--v-bad) 5%,transparent);border-radius:0 var(--v-r1) var(--v-r1) 0} .v-error-act{display:inline-block;margin-left:8px;color:var(--v-signal);text-decoration:none;font-weight:600} @media (prefers-reduced-motion: reduce){ .v-btn,.v-input,.v-toast{transition:none} .v-btn:active{transform:none} }