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

  /* Typography scale — 7 sizes only */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* Spacing — 4px ladder */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Radius — 3 values only */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* Shadows — softened for reduced glare */
  --sh-sm: 0 1px 2px rgba(28, 37, 54, .05);
  --sh-md: 0 2px 8px rgba(28, 37, 54, .06);
  --sh-lg: 0 8px 24px rgba(28, 37, 54, .08);

  /* Color tokens — light theme (eye-comfort palette) */
  --bg: #f0f3f7;
  --surface: #fafbfc;
  --border: #d4dde8;
  --text: #1c2536;
  --muted: #5c6b7e;
  --accent: #0e7a72;
  --accent-hover: #0c6a63;
  --accent-secondary: #0e8a9a;
  --accent-secondary-hover: #0c7a88;
  --danger: #b84a1a;
  --ok: #0e7a72;
  --input-bg: #f3f6f9;
  --header-bg: rgba(250, 251, 252, 0.96);
  --panel-shadow: 0 12px 40px rgba(28, 37, 54, 0.08);
  --nav-hover: rgba(28, 37, 54, 0.05);
  --nav-active-bg: rgba(14, 122, 114, 0.12);
  --nav-active-color: #0f423c;
  --preview-code: #117a6f;
  --alert-ok-bg: rgba(14, 122, 114, 0.1);
  --alert-ok-border: rgba(14, 122, 114, 0.32);
  --alert-ok-text: #117a6f;
  --alert-err-bg: rgba(184, 74, 26, 0.08);
  --alert-err-border: rgba(184, 74, 26, 0.28);
  --alert-err-text: #8f3d18;
  --badge-bg: rgba(14, 122, 114, 0.13);
  --badge-text: #117a6f;
  --badge-off-bg: rgba(92, 107, 126, 0.1);
  --card-bg: #f4f7fa;
  --status-bg: #edf7f4;
  --status-bar-bg: rgba(14, 122, 114, 0.08);
  --status-bar-border: rgba(14, 122, 114, 0.35);
  --status-ok: #0a7a5e;
  --status-warn: #a16207;
  --btn-danger-color: #b84a1a;
  --btn-danger-bg: #b84a1a;
  --btn-danger-bg-hover: #9a3d15;
  --btn-danger-fg: #ffffff;
  --clock-bg: #1c2536;
  --clock-text: #f4f7fa;
  --body-grad-1: #d4f0eb;
  --body-grad-2: #dce8f5;
  --dash-row-running-bg: rgba(14, 122, 114, 0.07);
  --dash-row-running-hover-bg: rgba(14, 122, 114, 0.11);
  --dash-row-schedule-off-bg: rgba(161, 98, 7, 0.07);
  --dash-row-schedule-off-hover-bg: rgba(161, 98, 7, 0.11);
  --dash-row-schedule-ended-bg: rgba(100, 116, 139, 0.06);
  --dash-row-schedule-ended-hover-bg: rgba(100, 116, 139, 0.1);
  --dash-row-idle-bg: rgba(161, 98, 7, 0.05);
  --dash-row-idle-hover-bg: rgba(161, 98, 7, 0.09);
  --dash-table-head-bg: #e8f3f1;
  --dash-table-head-fg: var(--nav-active-color);
  --dash-filter-active-bg: #e8f3f1;
  --dash-clock-hrs-bg: #e8f3f1;
  --dash-clock-min-bg: rgba(14, 122, 114, 0.1);
  --dash-clock-sec-bg: rgba(14, 138, 154, 0.1);
  --dash-clock-sec-color: var(--accent-secondary);
  --dash-toolbar-grad-from: #0e7a72;
  --dash-toolbar-grad-mid: #0c6e68;
  --dash-toolbar-grad-to: #0a645e;
  --num-pending-bg: rgba(161, 98, 7, 0.1);
  --num-pending-fg: #7a5a0e;
  --num-dialing-bg: rgba(14, 138, 154, 0.1);
  --num-dialing-fg: #0c5f6e;
  --num-done-bg: rgba(10, 122, 94, 0.1);
  --num-done-fg: #0a6e54;
  --num-failed-bg: rgba(184, 74, 26, 0.08);
  --num-failed-fg: #8f3d18;
  --num-skipped-bg: rgba(92, 107, 126, 0.08);
  --num-skipped-fg: #5c6b7e;
  --font: "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Shared aliases */
  --radius-sm: var(--r-sm);
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --surface-elevated: #ffffff;
  --accent-contrast: #ffffff;
  --accent-2: var(--accent-secondary);
  --tab-indicator-glow: rgba(14, 122, 114, 0.35);
  --accent-soft: rgba(14, 122, 114, 0.12);
  --accent-glow: rgba(14, 122, 114, 0.24);

  /* Shell / tabs / toolbars */
  --toolbar-bg: var(--accent);
  --toolbar-fg: #ffffff;
  --tab-bar-bg: var(--surface);
  --tab-active-indicator: var(--accent);
  --tab-hover-bg: var(--nav-hover);
  --tab-active-bg: var(--surface);
  --tab-active-color: var(--nav-active-color);
  --panel-head-bg: var(--accent);
  --panel-head-fg: #ffffff;

  /* Admin shell */
  --admin-sidebar-width: 260px;
  --admin-nav-group-color: #8a9bb0;
}

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

  --bg: #0f1419;
  --surface: #161c26;
  --border: #243040;
  --text: #dde4ed;
  --muted: #7d8fa3;
  --accent: #2ec4b0;
  --accent-hover: #28b5a2;
  --accent-secondary: #4eb8c8;
  --accent-secondary-hover: #3ea8b8;
  --danger: #f0a0ad;
  --ok: #2ec4b0;
  --input-bg: #121820;
  --header-bg: rgba(22, 28, 38, 0.94);
  --panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --nav-hover: rgba(255, 255, 255, 0.05);
  --nav-active-bg: rgba(46, 196, 176, 0.14);
  --nav-active-color: #e8f4f2;
  --preview-code: #7dd9cc;
  --alert-ok-bg: rgba(46, 196, 176, 0.12);
  --alert-ok-border: rgba(46, 196, 176, 0.35);
  --alert-ok-text: #7dd9cc;
  --alert-err-bg: rgba(240, 160, 173, 0.1);
  --alert-err-border: rgba(240, 160, 173, 0.32);
  --alert-err-text: #f0c4cb;
  --badge-bg: rgba(46, 196, 176, 0.16);
  --badge-text: #7dd9cc;
  --badge-off-bg: rgba(125, 143, 163, 0.14);
  --card-bg: #1a2230;
  --status-bg: rgba(18, 24, 32, 0.92);
  --status-bar-bg: rgba(46, 196, 176, 0.1);
  --status-bar-border: rgba(46, 196, 176, 0.3);
  --status-ok: #6fd4b8;
  --status-warn: #e8c96a;
  --btn-danger-color: #f0c4cb;
  --btn-danger-bg: #5c3040;
  --btn-danger-bg-hover: #6e3a4d;
  --btn-danger-fg: #f5d8de;
  --clock-bg: #0a0e14;
  --clock-text: #dde4ed;
  --body-grad-1: #142824;
  --body-grad-2: #161e2e;
  --dash-row-running-bg: rgba(46, 196, 176, 0.08);
  --dash-row-running-hover-bg: rgba(46, 196, 176, 0.13);
  --dash-row-schedule-off-bg: rgba(232, 201, 106, 0.07);
  --dash-row-schedule-off-hover-bg: rgba(232, 201, 106, 0.11);
  --dash-row-schedule-ended-bg: rgba(125, 143, 163, 0.08);
  --dash-row-schedule-ended-hover-bg: rgba(125, 143, 163, 0.12);
  --dash-row-idle-bg: rgba(232, 201, 106, 0.05);
  --dash-row-idle-hover-bg: rgba(232, 201, 106, 0.09);
  --dash-table-head-bg: rgba(46, 196, 176, 0.1);
  --dash-table-head-fg: var(--preview-code);
  --dash-filter-active-bg: rgba(46, 196, 176, 0.12);
  --dash-clock-hrs-bg: rgba(46, 196, 176, 0.12);
  --dash-clock-min-bg: rgba(46, 196, 176, 0.08);
  --dash-clock-sec-bg: rgba(78, 184, 200, 0.1);
  --dash-clock-sec-color: var(--accent-secondary);
  --dash-toolbar-grad-from: #1a3530;
  --dash-toolbar-grad-mid: #1e423c;
  --dash-toolbar-grad-to: #183530;
  --num-pending-bg: rgba(232, 201, 106, 0.1);
  --num-pending-fg: #d4b86a;
  --num-dialing-bg: rgba(78, 184, 200, 0.1);
  --num-dialing-fg: #7ebdd0;
  --num-done-bg: rgba(111, 212, 184, 0.1);
  --num-done-fg: #6fd4b8;
  --num-failed-bg: rgba(240, 160, 173, 0.1);
  --num-failed-fg: #f0c4cb;
  --num-skipped-bg: rgba(125, 143, 163, 0.1);
  --num-skipped-fg: #a8b8c8;
  --font: "Inter", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --sh-md: 0 2px 8px rgba(0, 0, 0, 0.28);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.35);

  --radius-sm: var(--r-sm);
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --surface-elevated: #1e2736;
  --accent-contrast: #0f1419;
  --accent-2: var(--accent-secondary);
  --tab-indicator-glow: rgba(46, 196, 176, 0.4);
  --accent-soft: rgba(46, 196, 176, 0.12);
  --accent-glow: rgba(46, 196, 176, 0.22);

  --toolbar-bg: var(--accent);
  --toolbar-fg: #0f1419;
  --tab-bar-bg: var(--surface);
  --tab-active-indicator: var(--accent);
  --tab-hover-bg: var(--nav-hover);
  --tab-active-bg: var(--surface);
  --tab-active-color: var(--nav-active-color);
  --panel-head-bg: var(--accent);
  --panel-head-fg: #0f1419;

  --admin-sidebar-width: 260px;
  --admin-nav-group-color: #6b7d94;
}

/* Supervisor compact density — supervisor shell only (not admin/auth) */
body.supervisor-compact:not(.admin-shell):not(.auth-page) {
  --fs-base: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.375rem;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 18px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
}