/* * Orbicular sidebar — "Amber Charcoal" design system (vol-m0y1 / P0). * * Single source of truth for the navigation sidebar look, loaded in BOTH the * Vue/Inertia layout and the legacy Blade layout so the menu is identical on * both sides of the strangler-fig boundary. Markup differs per platform; the * `.obx-*` class names and tokens here are the shared contract that * widgets/main-navigation (Vue) and layouts/partials/nav-item.blade.php (Blade) * both emit. Hand-authored (not Tailwind utilities) so it cannot drift. * * Spec: docs/superpowers/specs/2026-06-22-sidebar-orbicular-redesign-design.md */ /* ---- BRAND: single source of truth ------------------------------------- * The one place the brand accent is defined. Loaded globally (both the Vue * and Blade layouts link this file), so it resolves everywhere — unlike the * PrimeVue `--p-primary-*` tokens, which only exist once the Vue app mounts * and are therefore absent on pure Blade pages. The PrimeVue preset * (resources/js/theme/volumi-preset.ts) and the `.obx-*` sidebar tokens below * both reference --brand-primary, so changing the brand is a one-line edit. * INTERIM value; final owned by the Style Book. // TODO(style-book) * ---------------------------------------------------------------------- */ :root { --brand-primary: #4f45fc; --brand-primary-ink: #ffffff; } .obx-sidebar { border: 0; /* ---- tokens ---- */ --obx-bg: #2f4050; --obx-accent: var(--brand-primary); --obx-accent-ink: var(--brand-primary-ink); --obx-accent-soft: color-mix(in srgb, var(--brand-primary) 18%, transparent); --obx-text: #cbd5e1; --obx-text-strong: #f1f5f9; --obx-muted: #94a3b8; --obx-hover: rgba(255, 255, 255, 0.07); --obx-divider: rgba(255, 255, 255, 0.09); /* Liquid-glass active capsule — neutral frosted material, brand-independent. * On a flat sidebar there is no content behind to refract, so this reads as a * frosted translucent pill with a specular top rim + depth shadow (not full * Apple refraction). Dark-rail values here; the light Vue rail overrides below. */ --obx-glass-bg: rgba(255, 255, 255, 0.1); --obx-glass-rim: rgba(255, 255, 255, 0.22); --obx-glass-ring: rgba(255, 255, 255, 0.14); --obx-glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); --obx-scroll-thumb: rgba(255, 255, 255, 0.16); --obx-scroll-thumb-hover: rgba(255, 255, 255, 0.32); --obx-radius: 12px; --obx-radius-sm: 9px; --obx-gap: 11px; background: var(--obx-bg); color: var(--obx-text); font-family: Inter, system-ui, -apple-system, sans-serif; } /* Light theme — Vue sidebar only (the