/* ========================================================= ZAR AI v2 — PRIMITIVE TOKENS Raw design values only — no meaning, no theme awareness. Declared at :root deliberately: these are NOT theme-specific (a spacing/radius/motion scale is the same regardless of dark/light), so the "may contain theme-independent primitive values" allowance applies. No color role or surface value lives here — see tokens/semantic.css + tokens/themes.css, both scoped under .zar-v2, never :root. MOCKUP ONLY — sandbox/mockups/zar-ai-v2/. Independent of the production Styles/modes/tokens/tokens.css file. ========================================================= */ :root { /* --------------------------------------------------------- TYPE FAMILIES --------------------------------------------------------- */ --zar-v2-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --zar-v2-font-mono: ui-monospace, "SFMono-Regular", "Ubuntu Mono", Menlo, Consolas, monospace; /* --------------------------------------------------------- TYPE SCALE --------------------------------------------------------- */ --zar-v2-font-size-xs: 0.72rem; --zar-v2-font-size-sm: 0.82rem; --zar-v2-font-size-base: 0.95rem; --zar-v2-font-size-md: 1.05rem; --zar-v2-font-size-lg: 1.25rem; --zar-v2-font-size-xl: 1.6rem; --zar-v2-font-weight-regular: 400; --zar-v2-font-weight-medium: 500; --zar-v2-font-weight-semibold:600; --zar-v2-font-weight-bold: 700; --zar-v2-font-weight-black: 800; --zar-v2-line-height-tight: 1.15; --zar-v2-line-height-snug: 1.35; --zar-v2-line-height-normal:1.55; /* --------------------------------------------------------- SPACING SCALE (4px base unit) --------------------------------------------------------- */ --zar-v2-space-0: 0; --zar-v2-space-1: 0.25rem; --zar-v2-space-2: 0.5rem; --zar-v2-space-3: 0.75rem; --zar-v2-space-4: 1rem; --zar-v2-space-5: 1.25rem; --zar-v2-space-6: 1.5rem; --zar-v2-space-8: 2rem; --zar-v2-space-10: 2.5rem; --zar-v2-space-12: 3rem; --zar-v2-space-16: 4rem; /* --------------------------------------------------------- RADIUS SCALE --------------------------------------------------------- */ --zar-v2-radius-xs: 6px; --zar-v2-radius-sm: 10px; --zar-v2-radius-md: 14px; --zar-v2-radius-lg: 20px; --zar-v2-radius-xl: 28px; --zar-v2-radius-pill: 999px; --zar-v2-radius-circle: 50%; /* --------------------------------------------------------- ELEVATION (raw shadow values — a soft near-black shadow reads correctly regardless of the theme mapping above it, so these stay universal rather than re-themed) --------------------------------------------------------- */ --zar-v2-shadow-1: 0 1px 2px rgba(6, 8, 16, 0.35); --zar-v2-shadow-2: 0 8px 24px rgba(6, 8, 16, 0.28); --zar-v2-shadow-3: 0 20px 48px rgba(6, 8, 16, 0.34); --zar-v2-shadow-4: 0 32px 88px rgba(6, 8, 16, 0.46); /* --------------------------------------------------------- MOTION --------------------------------------------------------- */ --zar-v2-duration-fast: 120ms; --zar-v2-duration-base: 200ms; --zar-v2-duration-slow: 360ms; --zar-v2-duration-pulse: 3.4s; --zar-v2-ease-standard: cubic-bezier(.4, 0, .2, 1); --zar-v2-ease-emphasized: cubic-bezier(.2, 0, 0, 1); /* --------------------------------------------------------- Z-INDEX SCALE --------------------------------------------------------- */ --zar-v2-z-dropdown: 960; --zar-v2-z-panel: 950; --zar-v2-z-overlay: 990; --zar-v2-z-tooltip: 1000; /* ZAR AI v2 full-screen workspace layer. Intentionally kept below the site's highest global utility layer and below the collapsed ZAR orb. This allows selected always-on-top host controls to remain above the full-screen workspace while the workspace itself still sits above normal page content. Used by the full-screen layer, scrim, and mobile drawer. */ --zar-v2-z-fullscreen: 9998; /* 2026-09 GLOBAL LAUNCHER: live-inspected on the real Learn mode page (`?mode=learn`) and found a genuine collision — Learn's own floating assistant dock (`.learn-ai`, a `position:fixed` element anchored to the same bottom-right corner as the collapsed ZAR orb) computes to `z-index: 9999`, which previously beat the orb's old `z-index: 900` and silently ate every click at that shared corner (confirmed via `document.elementFromPoint()` at the orb's own center returning Learn's `#learn-ai-trigger` instead of the orb). Raised so the collapsed orb is always reachable at its default position, on any page, even before a user discovers it can be dragged clear of a local widget. The orb is always `hidden` whenever full-screen is open (see zar-v2-ui.js), so it never actually competes for paint with --zar-v2-z-fullscreen above regardless of the two tokens' order. The wider site contains several independently managed high-z-index utility layers. Those values are intentionally not normalized here. The ZAR v2 full-screen workspace therefore remains at 9998, while the collapsed global ZAR orb is kept at 10001 so the launcher can remain reachable where required. Do not infer that --zar-v2-z-fullscreen must be the highest z-index on the site. */ --zar-v2-z-orb: 10001; /* --------------------------------------------------------- COLOR RAMPS — raw, unassigned to any role yet. Only these feed tokens/semantic.css + tokens/themes.css; components never reference the neutral, violet, or cyan primitive token families directly. --------------------------------------------------------- */ --zar-v2-neutral-950: #06070b; --zar-v2-neutral-900: #0a0c12; --zar-v2-neutral-850: #0f121a; --zar-v2-neutral-800: #141821; --zar-v2-neutral-750: #191e29; --zar-v2-neutral-700: #1e2432; --zar-v2-neutral-600: #2a3143; --zar-v2-neutral-500: #3c4359; --zar-v2-neutral-400: #5b6280; --zar-v2-neutral-300: #838aa8; --zar-v2-neutral-200: #aeb3ca; --zar-v2-neutral-100: #d7dae8; --zar-v2-neutral-50: #f4f5fb; --zar-v2-neutral-0: #ffffff; /* Primary accent ramp — indigo / periwinkle / blue-violet. Its own family: cooler and less magenta-heavy than the pink- forward gradient inside the real ZAR mark itself, and not GB-Tox's mint/sky pairing. */ --zar-v2-violet-900: #1c1a42; --zar-v2-violet-700: #38399a; --zar-v2-violet-600: #4d4fd1; --zar-v2-violet-500: #6265e0; --zar-v2-violet-400: #8285ef; --zar-v2-violet-300: #a3a6f6; --zar-v2-violet-200: #c4c6fb; --zar-v2-violet-100: #e3e4fd; /* Secondary / "governed knowledge" accent ramp — cool cyan, used narrowly for the Knowledge Layer card. */ --zar-v2-cyan-600: #0f7a92; --zar-v2-cyan-500: #1f9ab5; --zar-v2-cyan-400: #3fbcd6; --zar-v2-cyan-300: #6fd6e8; --zar-v2-cyan-200: #a4e8f2; /* Sparingly-used state colors. */ --zar-v2-state-success: #35c98d; --zar-v2-state-warning: #e4b667; --zar-v2-state-danger: #ef7a8a; }