:root {
    color-scheme: dark;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--color-canvas);
    color: var(--color-text);

    --color-canvas: #0b1020;
    --color-canvas-muted: #0f1628;
    --color-canvas-translucent: rgb(11 16 32 / 72%);
    --color-canvas-translucent-strong: rgb(11 16 32 / 88%);
    --color-canvas-glow: rgb(109 94 252 / 15%);
    --color-surface: #121a2b;
    --color-surface-raised: #182238;
    --color-surface-interactive: #1c2942;
    --color-surface-hover: #23314d;
    --color-surface-translucent-subtle: rgb(18 26 43 / 52%);
    --color-surface-translucent-muted: rgb(18 26 43 / 68%);
    --color-surface-translucent-strong: rgb(18 26 43 / 84%);
    --color-text: #f3f6fb;
    --color-text-muted: #aeb9cc;
    --color-text-subtle: #8997ae;
    --color-border-subtle: #293650;
    --color-border-control: #596e95;
    --color-border-control-translucent: rgb(89 110 149 / 42%);
    --color-primary: #9aa7ff;
    --color-primary-hover: #b7c0ff;
    --color-primary-active: #8493f3;
    --color-primary-highlight: rgb(154 167 255 / 8%);
    --color-primary-soft: rgb(154 167 255 / 14%);
    --color-primary-border-subtle: rgb(154 167 255 / 24%);
    --color-primary-border: rgb(154 167 255 / 36%);
    --color-primary-border-strong: rgb(154 167 255 / 42%);
    --color-primary-underline: rgb(154 167 255 / 48%);
    --color-on-primary: #0b1020;
    --color-success: #55d6be;
    --color-success-highlight: rgb(85 214 190 / 8%);
    --color-success-soft: rgb(85 214 190 / 13%);
    --color-success-border: rgb(85 214 190 / 36%);
    --color-warning: #f6c86a;
    --color-warning-soft: rgb(246 200 106 / 13%);
    --color-warning-border: rgb(246 200 106 / 38%);
    --color-danger: #ff8793;
    --color-danger-hover: #ffa0a9;
    --color-danger-active: #ed6f7c;
    --color-danger-soft: rgb(255 135 147 / 13%);
    --color-danger-border: rgb(255 135 147 / 38%);
    --color-focus: #bac3ff;
    --color-backdrop: rgb(3 7 18 / 72%);
    --font-family-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-family-heading: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-family-monospace: "Cascadia Code", "Cascadia Mono", consolas, monospace;
    --font-size-small: 0.86rem;
    --font-size-compact: 0.92rem;
    --font-size-body: 1rem;
    --font-size-lead: 1.06rem;
    --font-weight-medium: 600;
    --font-weight-strong: 720;
    --font-weight-heading: 780;
    --space-extra-small: 0.35rem;
    --space-small: 0.65rem;
    --space-medium: 1rem;
    --space-large: 1.5rem;
    --space-extra-large: 2.25rem;
    --radius-small: 0.55rem;
    --radius-medium: 0.8rem;
    --radius-large: 1.1rem;
    --radius-pill: 999px;
    --control-height: 2.75rem;
    --shadow-surface: 0 12px 36px rgb(0 0 0 / 18%);
    --shadow-raised: 0 18px 50px rgb(0 0 0 / 28%);
    --shadow-header: 0 8px 28px rgb(0 0 0 / 14%);
    --shadow-brand: 0 6px 18px rgb(0 0 0 / 24%);
    --shadow-preview: 0 20px 50px rgb(0 0 0 / 24%);
    --scroll-offset: 5.5rem;
    --content-width: 96rem;
    --motion-duration-quick: 120ms;
    --motion-duration-standard: 180ms;
    --motion-duration-deliberate: 240ms;
    --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    /* Keep PrimeFaces variables aligned with the application theme. */
    --surface-a: var(--color-surface);
    --surface-b: var(--color-canvas);
    --surface-c: var(--color-surface-hover);
    --surface-d: var(--color-border-subtle);
    --surface-e: var(--color-surface-raised);
    --surface-f: var(--color-surface);
    --surface-ground: var(--color-canvas);
    --surface-section: var(--color-canvas-muted);
    --surface-card: var(--color-surface);
    --surface-overlay: var(--color-surface-raised);
    --surface-border: var(--color-border-subtle);
    --surface-hover: var(--color-surface-hover);
    --text-color: var(--color-text);
    --text-color-secondary: var(--color-text-muted);
    --primary-color: var(--color-primary);
    --primary-color-text: var(--color-on-primary);
    --font-family: var(--font-family-body);
    --border-radius: var(--radius-small);
    --focus-ring: 0 0 0 3px var(--color-focus);
}