/* ========================================================================== Glass UI Tokens (short + clean) Scope: ========================================================================== */ :root[data-ui="glass"] { --container-xs: 444px; --container-sm: 600px; --container-md: 960px; --container-lg: 1280px; --container-xl: 1920px; --container-xxl: 2560px; --glass-blur: 18px; --radius-1: 14px; --radius-2: 18px; --radius-3: 24px; --radius-4: 28px; --text-strong: var(--text-1); --text-muted: var(--text-2); --text-soft: var(--text-3); --primary: var(--accent-primary); --info: var(--accent-info); --success: var(--accent-success); --warning: var(--accent-warning); --error: var(--accent-error); --surface: var(--surface-1); --surface-subtle: var(--surface-2); --surface-soft: var(--surface-3); --border: var(--border-1); --border-strong: var(--border-2); --shadow: var(--shadow-surface); --shadow-raised: var(--shadow-float); --sheen: var(--sheen-1); --chart-text-strong: var(--text-1); --chart-text-muted: var(--text-2); --datagrid-header-bg: var(--surface-3); --datagrid-row-hover-bg: color-mix(in srgb, var(--surface-2), transparent 25%); --datagrid-row-selected-bg: color-mix(in srgb, var(--accent-primary), transparent 84%); --datagrid-border: var(--border-1); --datagrid-border-soft: color-mix(in srgb, var(--border-1), transparent 18%); --app-content-padding: 16px; --app-content-padding-mobile: 0px; } :root[data-ui="glass"][data-appearance="light"] { --text-1: rgba(15, 23, 42, 0.92); --text-2: rgba(15, 23, 42, 0.62); --text-3: rgba(15, 23, 42, 0.46); --accent-primary: #4f46e5; --accent-info: #0284c7; --accent-success: #16a34a; --accent-warning: #f59e0b; --accent-error: #dc2626; --page-bg: radial-gradient(1100px 800px at 10% 10%, rgba(99, 102, 241, 0.16), transparent 60%), radial-gradient(900px 700px at 90% 20%, rgba(236, 72, 153, 0.12), transparent 55%), radial-gradient(1000px 900px at 70% 95%, rgba(34, 211, 238, 0.10), transparent 55%), linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(226, 232, 240, 0.98) 100%); --surface-1: rgba(255, 255, 255, 0.66); --surface-2: rgba(255, 255, 255, 0.46); --surface-3: rgba(255, 255, 255, 0.38); --border-1: rgba(15, 23, 42, 0.10); --border-2: rgba(15, 23, 42, 0.16); --shadow-surface: 0 18px 60px rgba(2, 6, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70); --shadow-float: 0 28px 90px rgba(2, 6, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65); --sheen-1: rgba(255, 255, 255, 0.85); --nav-bg: rgba(255, 255, 255, 0.62); --nav-border: rgba(15, 23, 42, 0.10); --nav-sheen: rgba(255, 255, 255, 0.85); --nav-item: rgba(15, 23, 42, 0.78); --nav-item-muted: rgba(15, 23, 42, 0.55); --nav-hover-bg: rgba(255, 255, 255, 0.55); --nav-active-bg: rgba(255, 255, 255, 0.74); --nav-active-border: rgba(79, 70, 229, 0.18); --nav-group-bg: rgba(255, 255, 255, 0.40); --nav-group-inner: rgba(255, 255, 255, 0.36); --nav-shadow: 0 18px 55px rgba(2, 6, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.70); --tooltip-bg: rgba(15, 23, 42, 0.92); --tooltip-text: white; } :root[data-ui="glass"][data-appearance="dark"] { --text-1: rgba(241, 245, 249, 0.92); --text-2: rgba(226, 232, 240, 0.78); --text-3: rgba(226, 232, 240, 0.56); --accent-primary: #7e6fff; --accent-info: #38bdf8; --accent-success: #3dcb6c; --accent-warning: #ffb545; --accent-error: #ff3f5f; --page-bg: radial-gradient(1200px 800px at 10% 10%, rgba(99, 102, 241, 0.18), transparent 60%), radial-gradient(900px 700px at 90% 20%, rgba(236, 72, 153, 0.14), transparent 55%), radial-gradient(1000px 900px at 70% 95%, rgba(34, 211, 238, 0.12), transparent 55%), linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(2, 6, 23, 0.94) 100%); --surface-1: rgba(255, 255, 255, 0.08); --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.05); --border-1: rgba(255, 255, 255, 0.16); --border-2: rgba(255, 255, 255, 0.22); --shadow-surface: 0 18px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16); --shadow-float: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); --sheen-1: rgba(255, 255, 255, 0.18); --nav-bg: rgba(255, 255, 255, 0.07); --nav-border: rgba(255, 255, 255, 0.14); --nav-sheen: rgba(255, 255, 255, 0.18); --nav-item: rgba(241, 245, 249, 0.86); --nav-item-muted: rgba(226, 232, 240, 0.60); --nav-hover-bg: rgba(255, 255, 255, 0.08); --nav-active-bg: rgba(255, 255, 255, 0.10); --nav-active-border: rgba(126, 111, 255, 0.26); --nav-group-bg: rgba(255, 255, 255, 0.05); --nav-group-inner: rgba(255, 255, 255, 0.05); --nav-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14); --tooltip-bg: rgba(2, 6, 23, 0.96); --tooltip-text: rgba(241, 245, 249, 0.96); }