:root {
    color-scheme: light dark;
    --af-theme-color-light: #f5f7fa;
    --af-theme-color-dark: #10233d;
    --af-theme-canvas: #f5f7fa;
    --af-theme-surface: #fff;
    --af-theme-surface-elevated: #fff;
    --af-theme-border: #d5dbe3;
    --af-theme-text: #10233d;
    --af-theme-muted: #5b6573;
    --af-theme-danger: #b42318;
    --af-theme-warning: #a15c00;
    --af-theme-success: #087443;
    --af-theme-info: #1769aa;
    --af-theme-active: #c84b00;
    --af-theme-pressed: rgba(16, 35, 61, 0.08);
    --af-theme-focus-ring: rgba(39, 98, 200, 0.2);
    --af-theme-overlay: rgba(8, 18, 36, 0.52);
    --af-theme-skeleton: rgba(16, 35, 61, 0.08);
    --af-theme-media-surface: #081224;
    --af-theme-control-bg: #fff;
    --af-theme-control-border: #c8d1dd;
    --af-theme-nav-bg: rgba(255, 255, 255, 0.96);
    --af-theme-nav-active: rgba(200, 75, 0, 0.1);
    --af-theme-browser-chrome: #f5f7fa;
}

:root[data-af-theme="light"] {
    color-scheme: light;
}

:root[data-af-theme="dark"] {
    color-scheme: dark;
    --af-theme-canvas: #07090c;
    --af-theme-surface: #10151d;
    --af-theme-surface-elevated: #151c26;
    --af-theme-border: rgba(255, 255, 255, 0.12);
    --af-theme-text: #f4f7fb;
    --af-theme-muted: #a8b3c2;
    --af-theme-danger: #ff8f87;
    --af-theme-warning: #ffca70;
    --af-theme-success: #61e49a;
    --af-theme-info: #80bdff;
    --af-theme-active: #ff8126;
    --af-theme-pressed: rgba(255, 255, 255, 0.1);
    --af-theme-focus-ring: rgba(73, 163, 255, 0.32);
    --af-theme-overlay: rgba(0, 0, 0, 0.62);
    --af-theme-skeleton: rgba(255, 255, 255, 0.1);
    --af-theme-media-surface: #05070a;
    --af-theme-control-bg: #151c26;
    --af-theme-control-border: rgba(255, 255, 255, 0.18);
    --af-theme-nav-bg: rgba(8, 10, 13, 0.94);
    --af-theme-nav-active: rgba(255, 129, 38, 0.1);
    --af-theme-browser-chrome: #10233d;
}

body.alarmflow-ui.af-mobile-mode {
    background: var(--af-theme-canvas);
    color: var(--af-theme-text);
}

body.alarmflow-ui {
    --af-space-1: 0.25rem;
    --af-space-2: 0.5rem;
    --af-space-3: 0.75rem;
    --af-space-4: 1rem;
    --af-space-5: 1.25rem;
    --af-space-6: 1.5rem;
    --af-space-8: 2rem;
    --af-surface-workspace: #f5f7fa;
    --af-surface-card: #fff;
    --af-text: #10233d;
    --af-text-muted: #5b6573;
    --af-panel-shadow-soft: 0 1px 2px rgba(16, 35, 61, 0.035);
    --af-panel-shadow: 0 8px 20px rgba(16, 35, 61, 0.055);
    --af-panel-shadow-strong: 0 16px 36px rgba(15, 23, 42, 0.08);
    --af-row-shadow: 0 8px 18px rgba(16, 35, 61, 0.045);
    --af-surface-elevated: rgba(255, 255, 255, 0.98);
    --af-surface-muted: color-mix(in srgb, var(--af-surface) 58%, white);
    --af-surface-soft: color-mix(in srgb, var(--af-surface) 70%, white);
    --af-control-border: #dce4ee;
    --af-control-border-strong: #c9d3e0;
    --af-control-bg: #fff;
    --af-control-bg-soft: #fbfcfe;
    --af-surface-panel: var(--af-surface-card);
    --af-surface-nested: var(--af-control-bg-soft);
    --af-border-normal: var(--af-control-border);
    --af-border-strong: var(--af-control-border-strong);
    --af-control-radius: 7px;
    --af-card-radius: 8px;
    --af-panel-radius: var(--af-card-radius);
    --af-pill-radius: 6px;
    --af-control-height: 2.5rem;
    --af-toolbar-gap: var(--af-space-2);
    --af-inspector-width: 23.75rem;
    --af-overlay-backdrop: 185;
    --af-overlay-inspector: 190;
    --af-overlay-drawer: 210;
    --af-icon-size: 1rem;
    --af-icon-scale: 1.04;
    --af-icon-stroke: 2.45;
    --af-icon-chip-size: 2.5rem;
    --af-icon-chip-sm-size: 2.1rem;
    --af-icon-chip-lg-size: 3.25rem;
    --af-sidebar-width: 15.5rem;
    --af-sidebar-collapsed-width: 4.5rem;
    --af-topbar-height: 4.85rem;
    --af-page-gutter: clamp(1rem, 2vw, 2rem);
    --af-page-space-top: clamp(1rem, 1.5vw, 1.5rem);
    --af-page-space-bottom: 3rem;
    --af-page-global-max: 112rem;
    --af-page-standard-max: var(--af-page-global-max);
    --af-page-wide-max: var(--af-page-global-max);
    --af-page-dense-max: var(--af-page-global-max);
    --af-page-max: var(--af-page-global-max);
    --af-sidebar-bg: #08172a;
    --af-sidebar-bg-elevated: #10233d;
    --af-sidebar-text: #edf4fb;
    --af-sidebar-muted: #91a1b6;
    --af-sidebar-hover: rgba(255, 255, 255, 0.08);
    --af-sidebar-active: var(--af-orange);
    --af-mobile-shell-breakpoint: 900px;
}