/* Pixis Sync design tokens — light/dark via data-bs-theme on <html> */

:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --px-bg: #f5f7fb;
    --px-surface: #ffffff;
    --px-surface-muted: #f1f5f9;
    --px-surface-subtle: #f8fafc;
    --px-surface-alt: #fafbfc;
    --px-surface-overlay: rgba(255, 255, 255, .65);

    /* Text */
    --px-text: #1f2937;
    --px-text-strong: #1e293b;
    --px-text-heading: #0f172a;
    --px-text-body: #334155;
    --px-text-secondary: #475569;
    --px-text-muted: #64748b;
    --px-text-faint: #94a3b8;
    --px-text-placeholder: #c5ced8;
    --px-text-disabled: #cbd5e1;

    /* Borders */
    --px-border: #e5e7eb;
    --px-border-subtle: #e2e8f0;
    --px-border-muted: #dbe3ef;
    --px-border-faint: #eef2f7;

    /* Accent / primary */
    --px-accent: #2563eb;
    --px-accent-strong: #1d4ed8;
    --px-accent-emphasis: #1e40af;
    --px-accent-subtle: #eff6ff;
    --px-accent-border: #bfdbfe;
    --px-accent-soft: #dbeafe;

    /* Status */
    --px-success-bg: #dcfce7;
    --px-success-text: #166534;
    --px-warning-bg: #fef3c7;
    --px-warning-text: #92400e;
    --px-warning-border: #ffeeba;
    --px-warning-highlight: #fff8e6;
    --px-warning-highlight-strong: #ffefbf;
    --px-warning-border-strong: #eeb30a;
    --px-warning-text-dark: #9a7600;
    --px-warning-surface: #fff8e1;
    --px-danger-bg: #fee2e2;
    --px-danger-text: #991b1b;
    --px-surface-code: #f1f3f5;
    --px-surface-code-hover: #e9ecef;
    --px-surface-tree-header: #e6ebf1;
    --px-surface-tree-hover: #e9eef5;
    --px-surface-tree-child: #f4f7fa;
    --px-border-tree: #d8dee4;
    --px-border-code: #e3e7eb;
    --px-info-bg: #e7f5ff;
    --px-info-text: #1864ab;
    --px-success-text-bright: #2b8a3e;
    --px-danger-text-bright: #c92a2a;
    --px-danger-surface: #fef2f2;
    --px-danger-text-strong: #dc2626;
    --px-success-text-strong: #16a34a;

    /* Spacing */
    --px-space-1: .25rem;
    --px-space-2: .5rem;
    --px-space-3: .75rem;
    --px-space-4: 1rem;
    --px-space-5: 1.25rem;
    --px-space-6: 1.5rem;
    --px-space-8: 2rem;

    /* Radius */
    --px-radius-sm: 4px;
    --px-radius-md: 8px;
    --px-radius-lg: 12px;

    /* Shadows */
    --px-shadow-header: 0 1px 0 rgba(15, 23, 42, .08);
    --px-shadow-panel: 0 8px 24px rgba(15, 23, 42, .05);
    --px-shadow-card: 0 1px 3px rgba(15, 23, 42, .05);
    --px-shadow-elevated: 0 10px 28px rgba(15, 23, 42, .14);
    --px-shadow-inset-accent: inset 0 0 0 1px var(--px-accent-border);

    /* Layout */
    --app-header-height: 3.5rem;

    /* Bootstrap bridge — keep components aligned with Pixis tokens */
    --bs-body-bg: var(--px-bg);
    --bs-body-color: var(--px-text);
    --bs-body-bg-rgb: 245, 247, 251;
    --bs-secondary-bg: var(--px-surface-muted);
    --bs-secondary-color: var(--px-text-muted);
    --bs-tertiary-bg: var(--px-surface-subtle);
    --bs-tertiary-color: var(--px-text-secondary);
    --bs-border-color: var(--px-border);
    --bs-emphasis-color: var(--px-text-strong);
    --bs-emphasis-color-rgb: 30, 41, 59;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --px-bg: #0f172a;
    --px-surface: #1e293b;
    --px-surface-muted: #273549;
    --px-surface-subtle: #1a2436;
    --px-surface-alt: #243044;
    --px-surface-overlay: rgba(30, 41, 59, .75);

    --px-text: #e2e8f0;
    --px-text-strong: #f1f5f9;
    --px-text-heading: #f8fafc;
    --px-text-body: #cbd5e1;
    --px-text-secondary: #94a3b8;
    --px-text-muted: #64748b;
    --px-text-faint: #475569;
    --px-text-placeholder: #64748b;
    --px-text-disabled: #475569;

    --px-border: #334155;
    --px-border-subtle: #334155;
    --px-border-muted: #475569;
    --px-border-faint: #2d3b4f;

    --px-accent: #e8941a;
    --px-accent-strong: #f5b042;
    --px-accent-emphasis: #ffd59a;
    --px-accent-subtle: #3d2c14;
    --px-accent-border: #c47d1a;
    --px-accent-soft: #3d2c14;

    --px-success-bg: #14532d;
    --px-success-text: #86efac;
    --px-warning-bg: #78350f;
    --px-warning-text: #fcd34d;
    --px-warning-border: #92400e;
    --px-warning-highlight: #422006;
    --px-warning-highlight-strong: #5c2d0e;
    --px-warning-border-strong: #b45309;
    --px-warning-text-dark: #fcd34d;
    --px-warning-surface: #422006;
    --px-danger-bg: #7f1d1d;
    --px-danger-text: #fca5a5;
    --px-surface-code: #273549;
    --px-surface-code-hover: #334155;
    --px-surface-tree-header: #273549;
    --px-surface-tree-hover: #334155;
    --px-surface-tree-child: #1e2b3c;
    --px-border-tree: #475569;
    --px-border-code: #475569;
    --px-info-bg: #1e3a5f;
    --px-info-text: #93c5fd;
    --px-success-text-bright: #86efac;
    --px-danger-text-bright: #fca5a5;
    --px-danger-surface: #450a0a;
    --px-danger-text-strong: #f87171;
    --px-success-text-strong: #4ade80;

    --px-shadow-header: 0 1px 0 rgba(0, 0, 0, .3);
    --px-shadow-panel: 0 8px 24px rgba(0, 0, 0, .25);
    --px-shadow-card: 0 1px 3px rgba(0, 0, 0, .2);
    --px-shadow-elevated: 0 16px 40px rgba(0, 0, 0, .55);

    /* Bootstrap bridge — keep components aligned with Pixis tokens */
    --bs-body-bg: var(--px-bg);
    --bs-body-color: var(--px-text);
    --bs-body-bg-rgb: 15, 23, 42;
    --bs-secondary-bg: var(--px-surface-muted);
    --bs-secondary-color: var(--px-text-muted);
    --bs-tertiary-bg: var(--px-surface-subtle);
    --bs-tertiary-color: var(--px-text-secondary);
    --bs-border-color: var(--px-border);
    --bs-emphasis-color: var(--px-text-strong);
    --bs-emphasis-color-rgb: 241, 245, 249;
    --bs-primary: var(--px-accent);
    --bs-primary-rgb: 232, 148, 26;
    --bs-link-color: var(--px-accent-strong);
    --bs-link-hover-color: var(--px-accent-emphasis);
    --bs-link-color-rgb: 245, 176, 66;
    --bs-link-hover-color-rgb: 255, 213, 154;
    --bs-focus-ring-color: rgba(232, 148, 26, .35);
    --bs-pagination-active-bg: var(--px-accent);
    --bs-pagination-active-border-color: var(--px-accent);
}