/* Inter Variable — self-hosted, same-origin, no third party. font-display: optional means the browser uses the fallback if Inter isn't ready within ~100ms and NEVER swaps later (no FOUT). On subsequent navigations the font is already cached → Inter is used immediately. */ @font-face { font-family: 'InterVariable'; font-style: normal; font-weight: 100 900; font-display: optional; src: url('/fonts/InterVariable.woff2') format('woff2-variations'), url('/fonts/InterVariable.woff2') format('woff2'); } @font-face { font-family: 'InterVariable'; font-style: italic; font-weight: 100 900; font-display: optional; src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'), url('/fonts/InterVariable-Italic.woff2') format('woff2'); } /* SHIVA Design Tokens — served as a public asset, bypasses Vite's CSS optimizer (which treeshakes :root / [data-theme] blocks from bundled CSS when no selector matches "appear" in the route HTML). Linked from via in every top-level layout. Forced base — html/body are pinned to the light values directly here instead of relying on the var(--bg) cascade. Two reasons: 1. global.css gets inlined into by Astro's critical-CSS path, and that inlined block contains `body { background: var(--color-bg-primary) }` using a parallel legacy --color-* namespace where --color-bg-primary is hardcoded #0a0a0a. The bundled DashboardLayout body rule using var(--bg) should win on source order, but reports from the field say it doesn't — likely a per-route CSS-extraction quirk. 2. Even when var(--bg) wins, OS-level dark-mode browser quirks have occasionally substituted the body background. Forcing the values here makes the light theme deterministic. */ html, body { background-color: #0a0e14 !important; color: #e8eef5 !important; } [data-theme="dark"], [data-theme="dark"] body { background-color: #000000 !important; color: #fafafa !important; } /* Studio mode trumps both the light floor and data-theme="dark". Selector specificity (html[...] > html) wins over the rules above. */ html[data-mode="studio"], html[data-mode="studio"] body { background-color: #000000 !important; color: #f0f0f0 !important; } :root { /* SHIVA Dark Identity (2026-05-20). Own lane: not Anthropic warm-cream, not Linear cool-grey, not Vercel pure-white. Warm-dark blue-black base with electric-indigo accent + Studio cyan/magenta carrying across to the dashboard. Studio mode override stays — pitch-black for the cockpit, warm-dark for marketing. Both feel like SHIVA. */ --bg: #0a0e14; --bg-secondary: #0f141c; --bg-card: #11161e; --bg-input: #0f141c; --bg-sidebar: #0a0e14; --bg-elevated: #1a2030; /* Terminal mock keeps its own surface — see .cli-box in PublicLayout. */ --bg-cli: #0f141c; --border: #2a3040; --border-hover: #3a4358; --border-focus: #FF6B2C; --text: #e8eef5; --text-secondary: #a8b3c1; --text-muted: #6c7689; /* SHIVA brand stack — three-colour system, all carry CLI → Studio → Landing: · orange #FF6B2C — primary brand. CTAs, hero accent line, signature moments. The signature SHIVA colour, predates V12. · cyan #00d4ff — Studio brand. Code chips, links, the "this is data" colour. Carries across the dashboard. · orchestrator magenta #c084fc — V12 orchestration colour. Reserved for dirigent/worker/audit surfaces. */ --orange: #FF6B2C; --orange-dark: #E55A1F; --accent: #FF6B2C; --accent-dim: #E55A1F; --cyan: #00d4ff; --cyan-dark: #0099bb; --orchestrator: #c084fc; --orchestrator-dim: #7c3aed; --green: #4ade80; --red: #f87171; --yellow: #facc15; --success: var(--green); --error: var(--red); --warning: var(--yellow); --info: var(--cyan); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Five-stop elevation system (Polish Wave P1). xs — flat resting state for cards sm — slight lift, default for static cards on light bg md — hover/focused cards lg — popovers, dropdowns, sticky-on-scroll headers xl — modal dialogs, the highest layer above everything */ --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.04); --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04), 0 2px 4px rgba(31, 35, 40, 0.04); --shadow: 0 1px 3px rgba(31, 35, 40, 0.06), 0 4px 8px rgba(31, 35, 40, 0.04); --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.08), 0 2px 4px rgba(31, 35, 40, 0.04); --shadow-lg: 0 12px 32px rgba(31, 35, 40, 0.10), 0 4px 8px rgba(31, 35, 40, 0.06); --shadow-xl: 0 24px 56px rgba(31, 35, 40, 0.14), 0 8px 16px rgba(31, 35, 40, 0.08); --sidebar-width: 240px; --header-height: 64px; --touch-target-min: 44px; /* Motion tokens — Animation Wave A1. Easings: - ease-out: premium "expo out" feel for entrances - ease-in: zippy exits - ease-spring: tiny overshoot, used on press-release feedback Durations live in two buckets: - instant/fast for tap/hover micro-feedback - normal/slow for entrances and panel changes */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 150ms; --dur-normal: 200ms; --dur-slow: 320ms; --stagger-1: 30ms; --stagger-2: 60ms; --stagger-3: 90ms; --stagger-4: 120ms; } /* Tap-target floor — coarse pointers (touch screens) only. WCAG 2.5.5 / Apple HIG / Material spec all converge on 44px. Enforced via min-height + min-width on every interactive primitive. Desktop (fine pointer) keeps its denser sizing. */ @media (pointer: coarse) { .btn, button:not(.icon-btn-skip):not([hidden]), a.btn, .nav-link, .menu-item, .tab, [role="button"]:not([aria-hidden="true"]), input[type="checkbox"], input[type="radio"] { min-height: 44px; min-width: 44px; } .btn-icon-only, .btn-icon { min-width: 44px; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; --stagger-1: 0ms; --stagger-2: 0ms; --stagger-3: 0ms; --stagger-4: 0ms; } } [data-theme="light"] { /* Legacy light-theme escape hatch. Keeps the OLD pre-pivot values so any user who flipped data-theme="light" before the dark pivot doesn't suddenly see broken cream tokens. Not the marketing default anymore — marketing is dark now (see :root above). */ --bg: #ffffff; --bg-secondary: #f6f8fa; --bg-card: #ffffff; --bg-input: #ffffff; --bg-sidebar: #fafbfc; --bg-cli: #f6f8fa; --border: #d0d7de; --border-hover: #8c959f; --border-focus: #FF6B2C; --text: #1f2328; --text-secondary: #424a53; --text-muted: #57606a; --orange: #FF6B2C; --orange-dark: #E55A1F; --cyan: #0969da; --cyan-dark: #0550ae; --orchestrator: #b154d2; --green: #1a7f37; --red: #cf222e; --yellow: #9a6700; --shadow-xs: 0 1px 2px rgba(31, 35, 40, 0.04); --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04), 0 2px 4px rgba(31, 35, 40, 0.04); --shadow: 0 1px 3px rgba(31, 35, 40, 0.06), 0 4px 8px rgba(31, 35, 40, 0.04); --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.08), 0 2px 4px rgba(31, 35, 40, 0.04); --shadow-lg: 0 12px 32px rgba(31, 35, 40, 0.10), 0 4px 8px rgba(31, 35, 40, 0.06); --shadow-xl: 0 24px 56px rgba(31, 35, 40, 0.14), 0 8px 16px rgba(31, 35, 40, 0.08); } /* Studio mode — the dashboard's opinionated cockpit look. Activated by [data-mode="studio"] on . Overrides everything: tokens, body bg+fg, typography stack. No per-user opt-out (Fork A). Marketing routes do NOT set data-mode, so they keep the light theme. */ html[data-mode="studio"], html[data-mode="studio"] body { background-color: #000000 !important; color: #f0f0f0 !important; } [data-mode="studio"] { /* Canvas */ --bg: #000000; --bg-secondary: #0a0a0a; --bg-card: #0d0d0d; --bg-input: #0a0a0a; --bg-sidebar: #050505; --bg-elevated: #141414; --bg-cli: #000000; /* Borders — always visible, never subtle */ --border: #2a2a2a; --border-hover: #3d3d3d; --border-focus: var(--brand); --border-strong: #4a4a4a; /* Text — high-contrast, mono everywhere */ --text: #f0f0f0; --text-secondary: #b8b8b8; --text-muted: #707070; --text-dim: #4a4a4a; /* Brand stack — cyan for SHIVA, magenta for orchestration */ --brand: #00d4ff; --brand-dim: #007a96; --brand-bg: rgba(0, 212, 255, 0.08); --orchestrator: #c084fc; --orchestrator-dim: #7c3aed; --orchestrator-bg: rgba(192, 132, 252, 0.08); /* Legacy aliases used across the dashboard CSS — kept in sync so existing components inherit the studio palette without per-file migration. */ --cyan: var(--brand); --cyan-dark: var(--brand-dim); --orange: var(--brand); --orange-dark: var(--brand-dim); --green: #4ade80; --red: #f87171; --yellow: #facc15; --success: var(--green); --error: var(--red); --warning: var(--yellow); --info: var(--brand); /* Type — single monospace, denser scale */ --font-sans: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace; --font-mono: var(--font-sans); --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.625rem; --text-3xl: 2rem; /* Geometry — sharp corners */ --radius-sm: 0; --radius: 2px; --radius-lg: 2px; --radius-xl: 2px; /* Spacing — slightly denser than marketing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 28px; --space-7: 40px; --space-8: 56px; /* Shadows — gone in Studio */ --shadow-xs: none; --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; /* Motion — snap, no curves */ --dur-instant: 0ms; --dur-fast: 80ms; --dur-normal: 120ms; --dur-slow: 180ms; --ease-out: linear; --ease-in: linear; --ease-in-out: linear; --ease-spring: linear; } [data-theme="dark"] { --bg: #000000; --bg-secondary: #0a0a0a; --bg-card: #0d0d0d; --bg-input: #111111; --bg-sidebar: #080808; --bg-cli: #1a1a1a; --border: #1a1a1a; --border-hover: #333333; --border-focus: #FF6B2C; --text: #fafafa; --text-secondary: #b3b3b3; --text-muted: #8b8b8b; --cyan: #00D4FF; --cyan-dark: #00A8CC; --green: #10B981; --red: #EF4444; --yellow: #F59E0B; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7); }