:root {
    color-scheme: light;

    /* Color foundations */
    --color-page: #ededed;
    --color-page-mid: #ececec;
    --color-page-soft: #f7f7f7;
    --color-page-end: #e9e9e9;
    --color-page-highlight: rgba(255, 255, 255, 0.96);
    --color-page-highlight-soft: rgba(255, 255, 255, 0.9);
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f7f8;
    --color-surface-muted: #f0f0f2;
    --color-surface-inverse: #111114;
    --color-command: #050505;
    --color-action: #050505;
    --color-action-hover: #1d1d20;
    --color-action-active: #000000;
    --color-action-contrast: #ffffff;
    --color-glass: rgba(255, 255, 255, 0.54);
    --color-glass-strong: rgba(255, 255, 255, 0.77);
    --color-glass-control: rgba(255, 255, 255, 0.72);
    --color-glass-border: rgba(255, 255, 255, 0.88);
    --color-card-glass: rgba(247, 248, 250, 0.74);
    --color-card-glass-strong: rgba(255, 255, 255, 0.9);
    --color-card-glass-border: rgba(18, 18, 18, 0.065);
    --color-card-glass-highlight: rgba(255, 255, 255, 0.48);
    --color-chrome: rgba(246, 246, 247, 0.9);
    --color-chrome-strong: rgba(249, 249, 250, 0.96);
    --color-popover: rgba(255, 255, 255, 0.96);
    --color-popover-strong: rgba(255, 255, 255, 0.98);
    --color-field: rgba(255, 255, 255, 0.82);
    --color-layer-strong: rgba(255, 255, 255, 0.58);
    --color-layer: rgba(255, 255, 255, 0.48);
    --color-layer-soft: rgba(255, 255, 255, 0.38);
    --color-layer-faint: rgba(255, 255, 255, 0.32);
    --color-control-hover: rgba(18, 18, 18, 0.06);
    --color-inverse-border: rgba(255, 255, 255, 0.14);
    --color-inverse-control: rgba(255, 255, 255, 0.035);
    --color-inverse-hover: rgba(255, 255, 255, 0.1);
    --color-inverse-text: rgba(255, 255, 255, 0.82);
    --color-inverse-focus: rgba(255, 255, 255, 0.32);
    --color-backdrop: rgba(12, 12, 16, 0.48);
    --color-primary: #8758ef;
    --color-primary-hover: #7346d8;
    --color-primary-active: #6237c1;
    --color-primary-soft: #eee8ff;
    --color-primary-contrast: #ffffff;
    --color-primary-border: rgba(135, 88, 239, 0.2);
    --color-success: #1fac79;
    --color-success-strong: #137652;
    --color-success-soft: #e3f7ef;
    --color-warning: #d78a13;
    --color-warning-strong: #805005;
    --color-warning-soft: #fff3d9;
    --color-danger: #d84f63;
    --color-danger-strong: #922d3c;
    --color-danger-soft: #ffe8ec;
    --color-info: #3578d4;
    --color-info-strong: #245ba6;
    --color-info-soft: #e8f1ff;
    --color-text: #121212;
    --color-text-soft: #44444a;
    --color-text-muted: #74747d;
    --color-text-faint: #9a9aa3;
    --color-neutral: #cfd1d5;
    --color-border: rgba(10, 10, 10, 0.09);
    --color-border-strong: rgba(18, 18, 18, 0.18);
    --color-focus: rgba(135, 88, 239, 0.34);
    --color-preview-start: #668f98;
    --color-preview-mid: #48b8b7;
    --color-preview-end: #35b7cc;
    --color-preview-surface: #eaf3f3;

    /* Typography */
    --font-sans: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.5rem;
    --font-size-display: 3.0625rem;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.15;
    --line-height-display: 1.08;
    --line-height-snug: 1.35;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.7;
    --letter-spacing-tight: -0.035em;
    --letter-spacing-display: -0.045em;
    --letter-spacing-wide: 0.08em;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Shape and elevation */
    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.375rem;
    --radius-2xl: 1.625rem;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(20, 22, 28, 0.05);
    --shadow-sm: 0 8px 22px rgba(30, 32, 38, 0.06);
    --shadow-card: 0 6px 18px rgba(28, 30, 35, 0.045), 0 1px 3px rgba(28, 30, 35, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --shadow-command: 0 10px 24px rgba(0, 0, 0, 0.17), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    --shadow-soft: 0 20px 50px rgba(21, 25, 33, 0.06);
    --shadow-overlay: 0 24px 70px rgba(12, 12, 16, 0.22);
    --focus-ring: 0 0 0 3px var(--color-focus);

    /* Application geometry */
    --sidebar-width: 4rem;
    --sidebar-collapsed-width: 2.5rem;
    --sidebar-mobile-width: min(19rem, calc(100vw - 2.5rem));
    --header-height: 3.625rem;
    --mobile-header-height: 4rem;
    --content-max-width: 120rem;
    --brand-logo-scale: 170%;
    --workspace-gutter: 1.125rem;
    --workspace-gap: 1rem;
    --control-height-sm: 2.25rem;
    --control-height: 2.75rem;
    --control-height-lg: 3rem;

    /* Responsive reference tokens (media queries use the matching literal values) */
    --breakpoint-mobile: 22.5rem;
    --breakpoint-tablet: 48rem;
    --breakpoint-laptop: 64rem;
    --breakpoint-desktop: 80rem;
    --breakpoint-wide: 100rem;

    /* Motion */
    --transition-fast: 120ms;
    --transition-base: 200ms;
    --transition-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Layering */
    --z-base: 1;
    --z-sticky: 20;
    --z-dropdown: 40;
    --z-sidebar: 60;
    --z-backdrop: 70;
    --z-modal: 80;
    --z-toast: 90;
    --z-tooltip: 100;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-page);
    scroll-behavior: smooth;
}

body {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 5%, var(--color-page-highlight), transparent 28%),
        radial-gradient(circle at 84% 9%, var(--color-page-highlight-soft), transparent 31%),
        linear-gradient(145deg, var(--color-page-soft) 0%, var(--color-page-mid) 54%, var(--color-page-end) 100%);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
summary,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
summary,
a {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button {
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

[hidden] {
    display: none !important;
}

.app-skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-4);
    transform: translateY(-160%);
    border-radius: var(--radius-pill);
    background: var(--color-surface-inverse);
    color: var(--color-primary-contrast);
    transition: transform var(--transition-base) var(--ease-standard);
}

.app-skip-link:focus {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}