/* ========================================================================== PatchWorld UI - Design Tokens -------------------------------------------------------------------------- Single source of truth for every visual value used by the LocalUI pages (Worlds today, Library / Community / Home later). RULES - Never hardcode a color, size, radius or duration in a component file: add (or reuse) a token here instead. - Tokens are grouped by family. Raw palette values live in "Palette"; every other group references them semantically. - Shared by Unity (Vuplex WebView) and the Web Portal: keep it pure CSS custom properties, no preprocessor features. ========================================================================== */ :root { /* ---------------------------------------------------------------------- Palette (raw values, extracted from the Worlds mockup) Prefer the semantic tokens below in component code. ---------------------------------------------------------------------- */ --palette-ink-950: #282631; /* Deepest background (page base / gradient bottom) */ --palette-ink-900: #201d2a; /* Panels, modal surface */ --palette-ink-850: #282436; /* Cards */ --palette-ink-800: #312b43; /* Inputs, segmented controls, dropdowns */ --palette-ink-750: #3d3652; /* Hovered raised surfaces */ --palette-ink-700: #463f5b; /* Hairlines / borders */ --palette-ink-650: #41365c; /* Selected nav item background */ --palette-ink-600: #524a68; /* Disabled buttons, avatars */ --palette-lilac-50: #f4f2ff; /* Inverted "on" chip background */ --palette-lilac-100: #f1f0fb; /* Primary text */ --palette-lilac-200: #e0d9ff; /* Text on accent-tinted surfaces */ --palette-lilac-300: #cfcce8; /* Soft body text (descriptions) */ --palette-lilac-400: #b3b0d3; /* Idle nav text */ --palette-lilac-500: #9a97b8; /* Muted text */ --palette-violet-400: #a78bfa; /* Secondary accent (focus, highlights) */ --palette-violet-450: #8d70f5; /* Primary accent hover */ --palette-violet-500: #7c5cf0; /* Primary accent */ --palette-green-300: #6ee7b7; /* Live / free / success */ --palette-orange-500: #f59e0b; /* Demo / warning */ --palette-yellow-300: #fbd75a; /* Demo banner accent */ --palette-pink-400: #ff7ab8; /* Liked heart */ --palette-white: #ffffff; /* ---------------------------------------------------------------------- Semantic colors ---------------------------------------------------------------------- */ /* Surfaces */ --color-bg: linear-gradient(to bottom, #443E56 0%, #282631 100%); --color-bg-base: var(--palette-ink-950); --color-surface: var(--palette-ink-900); --color-surface-card: var(--palette-ink-850); --color-surface-input: var(--palette-ink-800); --color-surface-raised: var(--palette-ink-750); --color-surface-hover: rgba(255, 255, 255, 0.05); --color-surface-selected: var(--palette-ink-650); --color-surface-disabled: var(--palette-ink-600); --color-sidebar-bg: rgba(0, 0, 0, 0.3); --color-content-bg: rgba(0, 0, 0, 0.1); /* Borders */ --color-border: var(--palette-ink-700); --color-border-selected: rgba(167, 139, 250, 0.35); --color-border-strong: var(--palette-violet-400); /* Text */ --color-text: var(--palette-lilac-100); --color-text-soft: var(--palette-lilac-300); --color-text-idle: var(--palette-lilac-400); --color-text-muted: var(--palette-lilac-500); --color-text-on-accent: var(--palette-white); --color-text-strong: var(--palette-white); --color-text-on-tint: var(--palette-lilac-200); /* Accent */ --color-accent: var(--palette-violet-500); --color-accent-hover: var(--palette-violet-450); --color-accent-2: var(--palette-violet-400); --color-accent-tint: rgba(124, 92, 240, 0.14); --color-accent-tint-strong: rgba(124, 92, 240, 0.22); /* Status */ --color-live: var(--palette-green-300); --color-warning: var(--palette-orange-500); --color-liked: var(--palette-pink-400); /* Demo banner (free-demo build only) */ --color-demo-bg: #221e17; --color-demo-border: rgba(251, 215, 90, 0.22); --color-demo-border-strong: rgba(251, 215, 90, 0.45); --color-demo-accent: var(--palette-yellow-300); --color-demo-text: #f6efdc; --color-demo-hover: rgba(251, 215, 90, 0.10); /* Overlays */ --color-backdrop: rgba(14, 12, 20, 0.78); /* Modal veil */ --color-card-fade: rgba(40, 36, 54, 0.95); /* Gradient under card titles */ --color-scrollbar: rgba(255, 255, 255, 0.16); --color-scrollbar-hover: rgba(255, 255, 255, 0.32); /* ---------------------------------------------------------------------- Typography DM Sans & Sora are loaded offline via css/fonts.css. System font fallbacks ensure seamless display for Cyrillic and CJK (Chinese, Japanese, Korean) user names, titles, and descriptions. ---------------------------------------------------------------------- */ --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans', Helvetica, Arial, sans-serif; --font-head: 'Sora', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans', sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --font-size-2xs: 11px; /* Overlines, section labels */ --font-size-xs: 12px; /* Meta, tags */ --font-size-sm: 13px; /* Secondary text */ --font-size-md: 14px; /* Default body / buttons */ --font-size-lg: 15px; /* Emphasised body */ --font-size-xl: 16px; /* Card titles */ --font-size-2xl: 19px; /* Section titles (h2) */ --font-size-3xl: 24px; /* View titles (h1) */ --font-size-4xl: 26px; /* Modal titles */ --font-size-hero: 40px; /* Featured hero title */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-base: 1.5; --letter-spacing-tight: -0.01em; /* Headings */ --letter-spacing-wide: 0.12em; /* Uppercase overlines */ /* ---------------------------------------------------------------------- Spacing scale (4px base grid) ---------------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; /* ---------------------------------------------------------------------- Radii ---------------------------------------------------------------------- */ --radius-xs: 6px; /* Inline links, tiny chips */ --radius-sm: 8px; /* Tags */ --radius-md: 11px; /* Nav items */ --radius-lg: 12px; /* Buttons, inputs */ --radius-xl: 16px; /* Cards, dropdowns */ --radius-2xl: 22px; /* Hero banner */ --radius-3xl: 26px; /* Modal dialog */ --radius-pill: 999px; /* Chips, pills */ --radius-round: 50%; /* Avatars, round icon buttons */ /* ---------------------------------------------------------------------- Sizing VR pointers are imprecise: interactive elements should never be smaller than --hit-min in either dimension. ---------------------------------------------------------------------- */ --hit-min: 44px; /* Minimum interactive target (VR laser friendly) */ --hit-comfort: 48px; /* Preferred size for primary controls */ --icon-sm: 16px; --icon-md: 18px; --icon-lg: 22px; --sidebar-width: 208px; /* Fixed left navigation column */ --content-max: 1600px; /* Max readable width of the main viewport */ /* ---------------------------------------------------------------------- Borders & effects ---------------------------------------------------------------------- */ --border-width: 1px; --focus-ring: 2px solid var(--color-accent-2); --focus-offset: 2px; --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45); /* Dropdowns */ --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.45); /* Dialogs */ --blur-backdrop: 4px; /* ---------------------------------------------------------------------- Motion Keep animations short: long transitions feel laggy in a headset. ---------------------------------------------------------------------- */ --duration-fast: 0.15s; --duration-base: 0.2s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------------------------------------------------------------------- Stacking order ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 2; /* Overlay buttons on top of card thumbnails */ --z-sticky: 10; /* Sticky toolbars */ --z-dropdown: 40; /* Sort menus, popovers */ --z-modal: 100; /* Modal backdrop + dialog */ --z-toast: 110; /* Toast notifications, always on top */ /* ---------------------------------------------------------------------- Breakpoints (documentation only: custom properties cannot be used inside @media queries, keep these values in sync manually) --bp-compact: 860px -> narrower sidebar --bp-mobile: 700px -> sidebar becomes a horizontal top strip ---------------------------------------------------------------------- */ }