/* @omnis/ui — design tokens (scale only). Consumed by host apps via `@import "@omnis/ui/tokens.css";` from their global stylesheet. Every atom, molecule, and organism in the package reads from these variables only — no hard-coded spacing, sizes, radii, or colours anywhere else in the package. Palette-dependent colour tokens live under wwwroot/palettes/ and are activated via data-omnis-palette and data-omnis-mode on . */ :root { /* ---- Spacing — 4-based scale ------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Legacy page-padding aliases. Retained while standalone pages (/deals/[id], /deals/new) still reference them; will retire as those routes migrate to the canvas-shell layout. */ --pad-root-x: 40px; --pad-root-y: var(--space-6); --pad-card: var(--space-5); /* ---- Control sizes ----------------------------------------------- */ --size-control-sm: 24px; --size-control-md: 32px; --size-control-lg: 40px; /* ---- Border radii ------------------------------------------------ */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 9999px; /* ---- Type scale -------------------------------------------------- */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-md: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 22px; --text-2xl: 28px; --leading-tight: 1.15; --leading-normal: 1.5; /* ---- Letter spacing ---------------------------------------------- */ --tracking-tight: 0; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.13em; --tracking-widest: 0.18em; /* ---- Shadows (palette-independent) ------------------------------- */ --shadow-soft: 0 1px 3px rgba(0,0,0,0.08); --shadow-panel: 0 4px 16px rgba(0,0,0,0.14); --shadow-overlay: 0 20px 60px rgba(0,0,0,0.3); --overlay-backdrop: rgba(0,0,0,0.4); /* ---- Z-index layers ------------------------------------------------- */ --z-overlay: 900; --z-drawer: 950; --z-modal: 1000; --z-popover: 1000; --z-menu: 1000; --z-tooltip: 1100; /* ---- Focus ring --------------------------------------------------- */ --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); /* ---- Interaction -------------------------------------------------- */ --disabled-opacity: 0.5; --hover-transition-duration: 120ms; /* ---- Motion -------------------------------------------------------- */ --motion-duration-fast: 120ms; --motion-duration-normal: 200ms; --motion-duration-slow: 300ms; --motion-easing-linear: linear; --motion-easing-ease: ease; --motion-easing-ease-out: ease-out; /* ---- Breakpoints (reference only, used in documentation) ----------- */ /* --bp-sm: 640px; */ /* --bp-md: 768px; */ /* --bp-lg: 1024px; */ /* --bp-xl: 1280px; */ /* Font families are injected by the host app via next/font (or equivalent) and exposed as --font-sans / --font-mono. Atoms reference those names and fall back to a system stack when the host hasn't wired them. */ }