:root { /* Color tokens */ --color-page: rgb(255 255 255); --color-page-alt: rgb(249 250 251); --color-surface: rgb(15 23 42); --color-surface-alt: rgb(17 24 39); --color-bg: var(--color-surface); --color-card: rgb(30 41 59); --color-card-private: rgb(59 29 116); --color-card-critical: rgb(63 11 19); --color-panel: rgb(31 41 55); --color-panel-hover: rgb(51 65 85); --color-border: rgb(55 65 81); --color-border-subtle: rgb(209 213 219); --color-primary: rgb(254 0 50); --color-secondary: rgb(255 147 165); --color-info: rgb(96 165 250); --color-info-strong: rgb(37 99 235); --color-info-pressed: rgb(29 78 216); --color-muted-strong: rgb(107 114 128); --color-text: rgb(248 250 252); --color-text-strong: rgb(15 23 42); --color-text-muted: var(--color-muted); --color-muted: rgb(148 163 184); --color-muted-alt: rgb(156 163 175); --color-subtle-text: rgb(226 232 240); --color-subtle: rgb(229 231 235); --color-critical: rgb(127 29 29); --color-critical-strong: rgb(153 27 27); --color-warning: rgb(250 204 21); --color-warning-strong: rgb(217 119 6); --color-warning-surface: rgb(146 64 14 / 0.24); --color-neutral-700: rgb(63 63 70); --color-neutral-600: rgb(82 82 91); --color-white: rgb(255 255 255); --color-black: rgb(0 0 0); --color-overlay: rgb(26 34 52); --color-overlay-black: rgb(0 0 0 / 0.9); --color-overlay-muted: rgb(15 23 42 / 0.55); --color-overlay-strong: rgb(15 23 42 / 0.75); --color-overlay-darker: rgb(15 23 42 / 0.88); --color-overlay-panel: rgb(31 41 55 / 0.9); --color-overlay-panel-soft: rgb(31 41 55 / 0.75); --color-overlay-panel-tint: rgb(31 41 55 / 0.5); --color-overlay-panel-glass: rgb(30 41 59 / 0.85); --color-overlay-veil: rgb(11 17 32 / 0.96); --color-overlay-banner: rgb(51 65 85 / 0.95); --color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92); --color-overlay-panel-gradient-end: rgb(15 23 42 / 0.92); --color-surface-tint-subtle: rgb(148 163 184 / 0.08); --color-border-translucent: rgb(148 163 184 / 0.18); --color-border-translucent-strong: rgb(148 163 184 / 0.25); --color-border-translucent-bright: rgb(148 163 184 / 0.32); --color-border-translucent-stronger: rgb(148 163 184 / 0.35); --color-border-translucent-strongest: rgb(148 163 184 / 0.4); --color-border-translucent-glow: rgb(148 163 184 / 0.55); --color-border-translucent-medium: rgb(148 163 184 / 0.2); --color-border-neutral-soft: rgb(229 231 235 / 0.35); --color-border-info-soft: rgb(96 165 250 / 0.35); --color-border-sidebar-strong: rgb(55 65 81 / 0.9); --color-ring-private: rgb(168 85 247 / 0.55); --color-ring-private-hover: rgb(192 132 252 / 0.65); --color-ring-critical: rgb(239 68 68 / 0.4); --color-ring-critical-soft: rgb(239 68 68 / 0.35); --color-ring-critical-hover: rgb(239 68 68 / 0.45); --color-ring-critical-strong: rgb(239 68 68 / 0.55); --color-ring-alert: rgb(220 38 38 / 0.6); --color-gradient-visibility-start: rgb(129 140 248 / 0.4); --color-gradient-visibility-end: rgb(192 132 252 / 0.32); --color-white-soft: rgb(255 255 255 / 0.1); --color-white-softer: rgb(255 255 255 / 0.3); --color-white-softest: rgb(255 255 255 / 0.4); --color-shadow-floating: rgb(8 11 30 / 0.55); --color-shadow-elevated: rgb(8 11 30 / 0.45); --color-shadow-panel: rgb(15 23 42 / 0.35); --color-shadow-notification: rgb(15 23 42 / 0.3); --color-shadow-sidebar: rgb(0 0 0 / 0.45); --color-divider-strong: rgb(15 23 42 / 0.35); --color-text-frosted-strong: rgb(226 232 240 / 0.94); --color-text-frosted: rgb(226 232 240 / 0.9); --color-text-frosted-soft: rgb(226 232 240 / 0.82); /* Spacing scale */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Border radii */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%); --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%); --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%); --shadow-modal: 0 1.25rem 2.5rem -0.375rem rgb(15 23 42 / 55%); /* Typography */ --font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; /* Motion */ --motion-duration-fast: 120ms; --motion-duration-base: 160ms; --motion-duration-slow: 280ms; --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --modal-motion-duration: var(--motion-duration-base); }