/* --- XUI design tokens ------------------------------------------------------
   Generated from ThemeDefinition. Do not hand-edit.

   The palette lives in CSS, not JavaScript. Switching themes is a single
   data-theme attribute change resolved during normal style computation, rather
   than 65 setProperty calls pushed over interop on every switch -- and,
   critically, the correct palette is in effect on the very first paint.
   Applying it from JS meant the page rendered with the default theme until the
   interop module finished importing: a visible flash of the wrong theme on
   every load.

   Runtime overrides from ITypedThemeService are still written as inline custom
   properties on :root, which win over these by normal cascade rules.
   --------------------------------------------------------------------------- */

:root,
[data-theme="dark"] {
    --xui-bg: #0a0a0a;
    --xui-surface: #141414;
    --xui-surface-hover: #1a1a1a;
    --xui-surface-subtle: #101010;
    --xui-surface-border: rgba(255,255,255,0.08);
    --xui-border: rgba(255,255,255,0.08);
    --xui-border-active: rgba(255,255,255,0.2);
    --xui-text: #e2e8f0;
    --xui-muted: #94a3b8;
    --xui-text-secondary: #94a3b8;
    --xui-primary: #89b4fa;
    --xui-primary-rgb: 137,180,250;
    --xui-accent: #89b4fa;
    --xui-focus: #89b4fa;
    --xui-focus-glow: rgba(137,180,250,0.25);
    --xui-font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --xui-success: #a6e3a1;
    --xui-success-rgb: 166,227,161;
    --xui-valid-glow: rgba(166,227,161,0.25);
    --xui-warning: #f9e2af;
    --xui-warning-glow: rgba(249,226,175,0.25);
    --xui-danger: #f38ba8;
    --xui-danger-rgb: 243,139,168;
    --xui-info: #89b4fa;
    --xui-primary-subtle: color-mix(in srgb,#89b4fa 15%,transparent);
    --xui-success-subtle: color-mix(in srgb,#a6e3a1 15%,transparent);
    --xui-warning-subtle: color-mix(in srgb,#f9e2af 15%,transparent);
    --xui-error-subtle: color-mix(in srgb,#f38ba8 15%,transparent);
    --xui-info-subtle: color-mix(in srgb,#89b4fa 15%,transparent);
    --xui-surface-glass: rgba(20, 20, 20, 0.55);
    --xui-blur-md: blur(12px);
    --xui-blur-lg: blur(16px);
    --xui-skeleton-1: #141414;
    --xui-skeleton-2: #262626;
    --xui-tooltip-bg: #262626;
    --xui-tooltip-text: #e2e8f0;
    --xui-font-size-xs: 0.75rem;
    --xui-font-size-sm: 0.875rem;
    --xui-font-size-base: 1rem;
    --xui-font-size-lg: 1.125rem;
    --xui-font-size-xl: 1.25rem;
    --xui-font-size-xxl: 1.5rem;
    --xui-font-size-xxxl: 2rem;
    --xui-font-weight-light: 300;
    --xui-font-weight-normal: 400;
    --xui-font-weight-medium: 500;
    --xui-font-weight-semibold: 600;
    --xui-font-weight-bold: 700;
    --xui-space-xs: 0.25rem;
    --xui-space-sm: 0.5rem;
    --xui-space-md: 1rem;
    --xui-space-lg: 1.5rem;
    --xui-space-xl: 2rem;
    --xui-space-xxl: 3rem;
    --xui-radius-none: 0;
    --xui-radius-sm: 4px;
    --xui-radius-md: 6px;
    --xui-radius-lg: 8px;
    --xui-radius-xl: 12px;
    --xui-radius-full: 9999px;
    --xui-shadow-none: none;
    --xui-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --xui-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
    --xui-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
    --xui-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);
}

[data-theme="light"] {
    --xui-bg: #f8fafc;
    --xui-surface: #ffffff;
    --xui-surface-hover: rgba(0,0,0,0.04);
    --xui-surface-subtle: #f1f5f9;
    --xui-surface-border: rgba(0,0,0,0.08);
    --xui-border: rgba(0,0,0,0.08);
    --xui-border-active: rgba(0,0,0,0.2);
    --xui-text: #0f172a;
    --xui-muted: #64748b;
    --xui-text-secondary: #64748b;
    --xui-primary: #3b82f6;
    --xui-primary-rgb: 59,130,246;
    --xui-accent: #3b82f6;
    --xui-focus: #3b82f6;
    --xui-focus-glow: rgba(59,130,246,0.25);
    --xui-font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --xui-success: #16a34a;
    --xui-success-rgb: 22,163,74;
    --xui-valid-glow: rgba(22,163,74,0.25);
    --xui-warning: #ca8a04;
    --xui-warning-glow: rgba(202,138,4,0.25);
    --xui-danger: #dc2626;
    --xui-danger-rgb: 220,38,38;
    --xui-info: #2563eb;
    --xui-primary-subtle: color-mix(in srgb,#3b82f6 12%,transparent);
    --xui-success-subtle: color-mix(in srgb,#16a34a 12%,transparent);
    --xui-warning-subtle: color-mix(in srgb,#ca8a04 12%,transparent);
    --xui-error-subtle: color-mix(in srgb,#dc2626 12%,transparent);
    --xui-info-subtle: color-mix(in srgb,#2563eb 12%,transparent);
    --xui-surface-glass: rgba(255, 255, 255, 0.65);
    --xui-blur-md: blur(12px);
    --xui-blur-lg: blur(16px);
    --xui-skeleton-1: #f3f4f6;
    --xui-skeleton-2: #e6e6e6;
    --xui-tooltip-bg: #111827;
    --xui-tooltip-text: #ffffff;
    --xui-font-size-xs: 0.75rem;
    --xui-font-size-sm: 0.875rem;
    --xui-font-size-base: 1rem;
    --xui-font-size-lg: 1.125rem;
    --xui-font-size-xl: 1.25rem;
    --xui-font-size-xxl: 1.5rem;
    --xui-font-size-xxxl: 2rem;
    --xui-font-weight-light: 300;
    --xui-font-weight-normal: 400;
    --xui-font-weight-medium: 500;
    --xui-font-weight-semibold: 600;
    --xui-font-weight-bold: 700;
    --xui-space-xs: 0.25rem;
    --xui-space-sm: 0.5rem;
    --xui-space-md: 1rem;
    --xui-space-lg: 1.5rem;
    --xui-space-xl: 2rem;
    --xui-space-xxl: 3rem;
    --xui-radius-none: 0;
    --xui-radius-sm: 4px;
    --xui-radius-md: 6px;
    --xui-radius-lg: 8px;
    --xui-radius-xl: 12px;
    --xui-radius-full: 9999px;
    --xui-shadow-none: none;
    --xui-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --xui-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
    --xui-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
    --xui-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);
}

/* Paints the document canvas with the resolved palette. Plain element selectors, no
   !important: xui.tokens.css loads before a consumer's own stylesheet (see README), so any
   body/html rule the consumer declares afterwards wins on source order alone. Without this,
   --xui-bg is defined but nothing ever applies it, leaving the browser's default white behind
   every themed page. Font family belongs here for the same reason: every component declares
   font-family: inherit rather than repeating the token, so without this rule the chain bottoms
   out at the browser default (a serif face) instead of --xui-font-family. */
html,
body {
    background-color: var(--xui-bg);
    color: var(--xui-text);
    font-family: var(--xui-font-family);
}

/* Honour the OS preference until the user picks a theme. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --xui-bg: #f8fafc;
        --xui-surface: #ffffff;
        --xui-surface-hover: rgba(0,0,0,0.04);
        --xui-surface-subtle: #f1f5f9;
        --xui-surface-border: rgba(0,0,0,0.08);
        --xui-border: rgba(0,0,0,0.08);
        --xui-border-active: rgba(0,0,0,0.2);
        --xui-text: #0f172a;
        --xui-muted: #64748b;
        --xui-text-secondary: #64748b;
        --xui-primary: #3b82f6;
        --xui-primary-rgb: 59,130,246;
        --xui-accent: #3b82f6;
        --xui-focus: #3b82f6;
        --xui-focus-glow: rgba(59,130,246,0.25);
        --xui-font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
        --xui-success: #16a34a;
        --xui-success-rgb: 22,163,74;
        --xui-valid-glow: rgba(22,163,74,0.25);
        --xui-warning: #ca8a04;
        --xui-warning-glow: rgba(202,138,4,0.25);
        --xui-danger: #dc2626;
        --xui-danger-rgb: 220,38,38;
        --xui-info: #2563eb;
        --xui-primary-subtle: color-mix(in srgb,#3b82f6 12%,transparent);
        --xui-success-subtle: color-mix(in srgb,#16a34a 12%,transparent);
        --xui-warning-subtle: color-mix(in srgb,#ca8a04 12%,transparent);
        --xui-error-subtle: color-mix(in srgb,#dc2626 12%,transparent);
        --xui-info-subtle: color-mix(in srgb,#2563eb 12%,transparent);
        --xui-surface-glass: rgba(255, 255, 255, 0.65);
        --xui-blur-md: blur(12px);
        --xui-blur-lg: blur(16px);
        --xui-skeleton-1: #f3f4f6;
        --xui-skeleton-2: #e6e6e6;
        --xui-tooltip-bg: #111827;
        --xui-tooltip-text: #ffffff;
        --xui-font-size-xs: 0.75rem;
        --xui-font-size-sm: 0.875rem;
        --xui-font-size-base: 1rem;
        --xui-font-size-lg: 1.125rem;
        --xui-font-size-xl: 1.25rem;
        --xui-font-size-xxl: 1.5rem;
        --xui-font-size-xxxl: 2rem;
        --xui-font-weight-light: 300;
        --xui-font-weight-normal: 400;
        --xui-font-weight-medium: 500;
        --xui-font-weight-semibold: 600;
        --xui-font-weight-bold: 700;
        --xui-space-xs: 0.25rem;
        --xui-space-sm: 0.5rem;
        --xui-space-md: 1rem;
        --xui-space-lg: 1.5rem;
        --xui-space-xl: 2rem;
        --xui-space-xxl: 3rem;
        --xui-radius-none: 0;
        --xui-radius-sm: 4px;
        --xui-radius-md: 6px;
        --xui-radius-lg: 8px;
        --xui-radius-xl: 12px;
        --xui-radius-full: 9999px;
        --xui-shadow-none: none;
        --xui-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
        --xui-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
        --xui-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
        --xui-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.1);
    }
}