: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;
    --af-status-shell-control-height: 2.75rem;
    --af-status-shell-control-visual-height: 2.5rem;
    --af-status-shell-control-radius: 10px;
    --af-status-shell-popover-width: 16.25rem;
    --af-status-shell-clear-surface: #fff;
    --af-status-shell-clear-border: #c8d1dd;
    --af-status-shell-clear-text: #10233d;
    --af-status-shell-clear-icon: #087443;
    --af-status-shell-neutral-icon: #526173;
    --af-status-shell-neutral-surface: #eef1f4;
    --af-status-shell-schedule-surface: #eef4f8;
    --af-status-shell-schedule-icon: #53708e;
    --af-status-shell-level-one-surface: #fff1df;
    --af-status-shell-level-one-border: #f2bd81;
    --af-status-shell-level-one-text: #9a4e0d;
    --af-status-shell-level-one-icon: #c86510;
    --af-status-shell-level-two-surface: #ffebeb;
    --af-status-shell-level-two-border: #efb1b1;
    --af-status-shell-level-two-text: #a7252d;
    --af-status-shell-level-two-icon: #c42f35;
    --af-status-shell-level-three-surface: #ffe1e1;
    --af-status-shell-level-three-border: #e99595;
    --af-status-shell-level-three-text: #951f28;
    --af-status-shell-level-three-icon: #ba2830;
    --af-status-shell-acknowledged-surface: #fff0e4;
    --af-status-shell-acknowledged-border: #edbc9f;
    --af-status-shell-acknowledged-text: #93401f;
    --af-status-shell-acknowledged-icon: #ad4f27;
    --af-status-shell-forced-active-surface: #eaf3fb;
    --af-status-shell-forced-active-border: #a9c9e6;
    --af-status-shell-forced-active-text: #17577e;
    --af-status-shell-forced-active-icon: #1769aa;
    --af-status-shell-forced-paused-surface: #fff4df;
    --af-status-shell-forced-paused-border: #f0ca8b;
    --af-status-shell-forced-paused-text: #925b08;
    --af-status-shell-forced-paused-icon: #b56d00;
    --af-status-shell-warning: #a15c00;
    --af-status-shell-danger: #b42318;
    --af-status-shell-unknown: #526173;
}

: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;
    --af-status-shell-clear-surface: #151c26;
    --af-status-shell-clear-border: rgba(255, 255, 255, 0.18);
    --af-status-shell-clear-text: #f4f7fb;
    --af-status-shell-clear-icon: #61e49a;
    --af-status-shell-neutral-icon: #a8b3c2;
    --af-status-shell-neutral-surface: #171d25;
    --af-status-shell-schedule-surface: #15202a;
    --af-status-shell-schedule-icon: #8eb6d8;
    --af-status-shell-level-one-surface: #2b2117;
    --af-status-shell-level-one-border: #70502e;
    --af-status-shell-level-one-text: #ffd39b;
    --af-status-shell-level-one-icon: #ffb35c;
    --af-status-shell-level-two-surface: #2d191b;
    --af-status-shell-level-two-border: #774044;
    --af-status-shell-level-two-text: #ffaaa6;
    --af-status-shell-level-two-icon: #ff8f87;
    --af-status-shell-level-three-surface: #351719;
    --af-status-shell-level-three-border: #8c3d43;
    --af-status-shell-level-three-text: #ffc0bc;
    --af-status-shell-level-three-icon: #ff7f79;
    --af-status-shell-acknowledged-surface: #2d201a;
    --af-status-shell-acknowledged-border: #744b37;
    --af-status-shell-acknowledged-text: #ffc1a0;
    --af-status-shell-acknowledged-icon: #ff9b68;
    --af-status-shell-forced-active-surface: #152536;
    --af-status-shell-forced-active-border: #395c79;
    --af-status-shell-forced-active-text: #a8d8ff;
    --af-status-shell-forced-active-icon: #80bdff;
    --af-status-shell-forced-paused-surface: #2b2417;
    --af-status-shell-forced-paused-border: #735a2e;
    --af-status-shell-forced-paused-text: #ffda91;
    --af-status-shell-forced-paused-icon: #ffca70;
    --af-status-shell-warning: #ffca70;
    --af-status-shell-danger: #ff8f87;
    --af-status-shell-unknown: #a8b3c2;
}

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;
}

:root[data-af-theme="dark"] body.alarmflow-ui {
    background: var(--af-theme-canvas);
    --af-surface-workspace: var(--af-theme-canvas);
    --af-surface-card: var(--af-theme-surface);
    --af-text: var(--af-theme-text);
    --af-text-muted: var(--af-theme-muted);
    --af-surface-elevated: var(--af-theme-surface-elevated);
    --af-surface-muted: color-mix(in srgb, var(--af-theme-surface) 84%, white 16%);
    --af-surface-soft: color-mix(in srgb, var(--af-theme-surface) 92%, white 8%);
    --af-control-border: var(--af-theme-control-border);
    --af-control-border-strong: var(--af-theme-control-border);
    --af-control-bg: var(--af-theme-control-bg);
    --af-control-bg-soft: color-mix(in srgb, var(--af-theme-control-bg) 88%, white 12%);
    --af-navy: var(--af-theme-text);
    --af-orange: var(--af-theme-active);
    --af-surface: var(--af-theme-surface);
    --af-muted: var(--af-theme-muted);
    --af-success: var(--af-theme-success);
    --af-warning: var(--af-theme-warning);
    --af-danger: var(--af-theme-danger);
    --af-info: var(--af-theme-info);
    --af-border: var(--af-theme-border);
}

:root[data-af-theme="dark"] body.alarmflow-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea),
:root[data-af-theme="dark"] body.alarmflow-ui :is(.af-action-button, .af-secondary-button, .af-media-btn) {
    background: var(--af-theme-control-bg);
    color: var(--af-theme-text);
}

:root[data-af-theme="dark"] body.alarmflow-ui .af-panel {
    background: var(--af-theme-surface-elevated);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--af-theme-overlay) 34%, transparent);
}

:root[data-af-theme="dark"] body.alarmflow-ui :is(.af-events-page .dashboard-event-hero, .af-events-page .activity-queue-row, .af-events-page .dashboard-event-pagination__page, .af-events-page .activity-detail-drawer__panel) {
    background: var(--af-theme-surface-elevated);
    color: var(--af-theme-text);
}

:root[data-af-theme="dark"] body.alarmflow-ui .af-events-page .dashboard-event-hero__facts div {
    background: var(--af-theme-surface-soft);
}