:root {
  color-scheme: light;

  /* ===== UI 2026 semantic tokens ===== */
  --ui-font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --ui-text-12: 12px;
  --ui-text-13: 13px;
  --ui-text-14: 14px;
  --ui-text-16: 16px;
  --ui-text-18: 18px;
  --ui-text-20: 20px;
  --ui-text-24: 24px;
  --ui-text-28: 28px;
  --ui-text-11: 12px;
  --ui-leading-16: 16px;
  --ui-leading-20: 20px;
  --ui-leading-24: 24px;
  --ui-leading-28: 28px;
  --ui-leading-32: 32px;
  --ui-leading-36: 36px;
  --ui-lh-tight: 1.25;
  --ui-lh-normal: 1.45;
  --ui-weight-regular: 400;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;
  --ui-weight-bold: 700;
  --ui-fw-regular: var(--ui-weight-regular);
  --ui-fw-medium: var(--ui-weight-medium);
  --ui-fw-semibold: var(--ui-weight-semibold);
  --ui-fw-bold: var(--ui-weight-bold);

  /* ===== Typography system ===== */
  --type-display-lg-size: var(--ui-text-28);
  --type-display-lg-line: var(--ui-leading-36);
  --type-display-lg-weight: var(--ui-weight-bold);

  --type-title-lg-size: var(--ui-text-24);
  --type-title-lg-line: var(--ui-leading-32);
  --type-title-lg-weight: var(--ui-weight-bold);

  --type-title-md-size: var(--ui-text-20);
  --type-title-md-line: var(--ui-leading-28);
  --type-title-md-weight: var(--ui-weight-bold);

  --type-section-md-size: var(--ui-text-16);
  --type-section-md-line: var(--ui-leading-24);
  --type-section-md-weight: var(--ui-weight-semibold);

  --type-body-md-size: var(--ui-text-14);
  --type-body-md-line: var(--ui-leading-20);
  --type-body-md-weight: var(--ui-weight-regular);

  --type-body-sm-size: var(--ui-text-13);
  --type-body-sm-line: 18px;
  --type-body-sm-weight: var(--ui-weight-regular);

  --type-label-sm-size: var(--ui-text-12);
  --type-label-sm-line: var(--ui-leading-16);
  --type-label-sm-weight: var(--ui-weight-semibold);
  --ui-space-2: 2px;
  --ui-space-4: 4px;
  --ui-space-8: 8px;
  --ui-space-12: 12px;
  --ui-space-16: 16px;
  --ui-space-20: 20px;
  --ui-space-24: 24px;
  --ui-space-32: 32px;
  --ui-space-40: 40px;
  --ui-space-48: 48px;
  --ui-radius-6: 6px;
  --ui-radius-8: 8px;
  --ui-radius-10: 10px;
  --ui-radius-12: 12px;
  --ui-radius-16: 16px;
  --ui-radius-pill: 999px;
  --ui-radius-sm: var(--ui-radius-8);
  --ui-radius-md: var(--ui-radius-10);
  --ui-radius-lg: var(--ui-radius-12);
  --ui-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ui-shadow-2: 0 10px 24px rgba(16, 24, 40, 0.12);
  --ui-control-h-desktop: 40px;
  --ui-control-h-mobile: 44px;
  --ui-iconbtn-size-desktop: 36px;
  --ui-iconbtn-size-mobile: 44px;
  --ui-z-topbar: 60;
  --ui-z-tabbar: 70;
  --ui-z-overlay: 300;
  --ui-z-drawer: 400;
  --ui-z-toast: 500;
  --ui-z-startup: 1300;
  --ui-reduce-motion: 0;
  --space-10: 40px;
  --radius-8: 8px;

  --bg-app: #f4f6f8;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f8fafc;
  --border-subtle: #d8dee6;
  --border-default: #cbd5e1;
  --divider-default: #d2dae5;
  --text-primary: #101828;
  --text-secondary: #667085;

  --ui-bg-canvas: var(--bg-app);
  --ui-bg-surface: var(--bg-surface);
  --ui-bg-surface-2: var(--bg-surface-subtle);
  --ui-bg-surface-muted: var(--bg-surface-subtle);
  --ui-bg-inset: var(--bg-surface-subtle);
  --ui-bg-elevated: var(--bg-surface);
  --ui-border-subtle: var(--border-subtle);
  --ui-border-strong: var(--border-default);
  --ui-divider-default: var(--divider-default);
  --ui-text-primary: var(--text-primary);
  --ui-text-secondary: var(--text-secondary);
  --ui-text-tertiary: #98a2b3;
  --ui-accent: #ff6b00;
  --ui-accent-weak: #fff1e8;
  --ui-success: #16a34a;
  --ui-success-weak: #e9f9ef;
  --ui-warning: #f59e0b;
  --ui-warning-weak: #fff7e6;
  --ui-danger: #dc2626;
  --ui-danger-weak: #feecec;
  --ui-focus-ring: 0 0 0 2px rgba(255, 107, 0, 0.35);

  /* Brand Light */
  --soc-bg: var(--ui-bg-canvas);
  --soc-surface: var(--ui-bg-surface);
  --soc-surface-2: var(--ui-bg-surface-2);
  --soc-card-bg: #ffffff;
  --soc-panel-bg: var(--bg-surface);
  --soc-soft-bg: var(--bg-surface-subtle);
  --soc-card-grad-1: #ffffff;
  --soc-card-grad-2: #ffffff;
  --soc-text: var(--ui-text-primary);
  --soc-text-sub: var(--ui-text-secondary);
  --soc-muted: var(--soc-text-sub);
  --soc-primary: var(--ui-accent);
  --soc-primary-deep: #d95c15;
  --soc-primary-soft-bg: #ffe8da;
  --soc-on-primary: #ffffff;
  --soc-accent: #5c5c5c;
  --soc-success: var(--ui-success);
  --soc-info: #0284c7;
  --soc-warning: var(--ui-warning);
  --soc-danger: var(--ui-danger);
  --soc-danger-deep: #b42318;
  --soc-on-danger: #ffffff;
  --soc-border: var(--ui-border-subtle);
  --soc-border-strong: var(--ui-border-strong);
  --soc-divider: var(--ui-divider-default);
  --soc-divider-strong: var(--border-default);
  --soc-shadow: rgba(0, 0, 0, 0.06);
  --soc-shadow-soft: var(--ui-shadow-1);
  --soc-shadow-card: var(--ui-shadow-2);
  --soc-shadow-tabbar: 0 -8px 18px rgba(0, 0, 0, 0.1);
  --soc-ring: var(--ui-focus-ring);
  --soc-focus: rgba(255, 107, 0, 0.35);

  --soc-link: #b45309;
  --soc-link-hover: #9a3412;
  --soc-label: #5e5e5e;
  --soc-placeholder: #9aa0aa;

  --soc-input-bg: #ffffff;
  --soc-input-border: var(--soc-border);
  --soc-input-focus: rgba(242, 106, 27, 0.35);
  --soc-topbar-bg: var(--soc-surface);

  --soc-topbar-bg-1: rgba(255, 255, 255, 0.92);
  --soc-topbar-bg-2: rgba(255, 255, 255, 0.86);
  --soc-tabbar-bg-1: rgba(255, 255, 255, 0.96);
  --soc-tabbar-bg-2: rgba(255, 255, 255, 0.96);
  --soc-tabbar-icon: #7a7a7a;
  --soc-tabbar-icon-active: var(--soc-primary);
  --soc-tabbar-active-bg: rgba(242, 106, 27, 0.16);
  --soc-tabbar-shadow: var(--soc-shadow-tabbar);
  --soc-tabbar-shadow-color: rgba(0, 0, 0, 0.14);
  --soc-tabbar-shadow-soft: rgba(0, 0, 0, 0.1);

  --soc-overlay-soft: rgba(17, 24, 39, 0.36);
  --soc-overlay-backdrop: rgba(17, 24, 39, 0.42);
  --soc-overlay-strong: rgba(17, 24, 39, 0.52);
  --soc-overlay-panel: rgba(17, 24, 39, 0.72);

  --soc-surface-overlay-1: rgba(255, 255, 255, 0.98);
  --soc-surface-overlay-2: rgba(255, 255, 255, 0.95);
  --soc-surface-overlay-3: rgba(255, 255, 255, 0.94);
  --soc-surface-overlay-4: rgba(255, 255, 255, 0.9);
  --soc-surface-overlay-5: rgba(255, 255, 255, 0.86);
  --soc-surface-overlay-6: rgba(255, 255, 255, 0.84);
  --soc-surface-overlay-7: rgba(255, 255, 255, 0.78);
  --soc-surface-overlay-8: rgba(255, 255, 255, 0.76);
  --soc-surface-overlay-9: rgba(255, 255, 255, 0.74);
  --soc-surface-overlay-10: rgba(255, 255, 255, 0.72);
  --soc-surface-overlay-11: rgba(255, 255, 255, 0.7);
  --soc-surface-overlay-12: rgba(255, 255, 255, 0.66);
  --soc-surface-overlay-13: rgba(255, 255, 255, 0.64);
  --soc-surface-overlay-14: rgba(255, 255, 255, 0.6);
  --soc-surface-overlay-15: rgba(255, 255, 255, 0.35);
  --soc-surface-overlay-16: rgba(255, 255, 255, 0.32);

  --soc-secondary-bg: var(--bg-surface-subtle);
  --soc-secondary-bg-hover: #eef2f6;
  --soc-secondary-border: var(--border-default);
  --soc-secondary-text: #344054;
  --soc-ghost-border: var(--border-default);
  --soc-ghost-text: #475467;
  --soc-ghost-hover-bg: var(--bg-surface-subtle);

  --soc-nav-item-bg: #f5f5f5;
  --soc-nav-item-active-bg: rgba(242, 106, 27, 0.12);
  --soc-nav-item-active-border: rgba(242, 106, 27, 0.45);
  --soc-nav-item-text: #1f1f1f;
  --soc-nav-sheet-bg: #ffffff;
  --soc-nav-sheet-divider: rgba(17, 24, 39, 0.16);
  --soc-nav-sheet-divider-active: rgba(17, 24, 39, 0.3);
  --soc-nav-sheet-handle: rgba(31, 31, 31, 0.34);
  --soc-nav-sheet-handle-active: rgba(31, 31, 31, 0.52);

  --soc-kpi-bg: var(--bg-surface);
  --soc-kpi-label: #7a7a7a;
  --soc-kpi-value: #1f1f1f;
  --soc-block-bg: var(--bg-surface);
  --soc-mini-row-bg: rgba(255, 255, 255, 0.96);
  --soc-mini-row-text-strong: #374151;

  --soc-filterbar-bg: rgba(255, 255, 255, 0.92);
  --soc-filter-chip-bg: #f5f5f5;
  --soc-filter-chip-border: #e5e5e5;
  --soc-filter-chip-text: #374151;
  --soc-filter-chip-active-bg: rgba(242, 106, 27, 0.12);
  --soc-filter-chip-active-border: rgba(242, 106, 27, 0.48);
  --soc-filter-chip-active-text: #c2410c;
  --soc-date-display-bg: rgba(255, 255, 255, 0.92);
  --soc-date-display-text: #1f1f1f;

  --soc-summary-grad-1: #ffffff;
  --soc-summary-grad-2: #fafafa;
  --soc-summary-active-grad-1: #fff2ea;
  --soc-summary-active-grad-2: #ffe8da;
  --soc-summary-active-border: rgba(242, 106, 27, 0.5);
  --soc-summary-label: #7a7a7a;
  --soc-summary-value: #1f1f1f;
  --soc-shimmer-1: rgba(229, 231, 235, 0.62);
  --soc-shimmer-2: rgba(209, 213, 219, 0.5);

  --soc-incident-grad-1: #ffffff;
  --soc-incident-grad-2: #fafafa;
  --soc-incident-title: #1f1f1f;
  --soc-incident-type: #5f6b7a;
  --soc-incident-meta: #7a7a7a;
  --soc-incident-pill-bg: #f5f5f5;
  --soc-incident-pill-border: #dddddd;
  --soc-incident-pill-text: #374151;
  --soc-critical-text: #b91c1c;
  --soc-menu-bg: rgba(255, 255, 255, 0.98);
  --soc-menu-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
  --soc-menu-shadow-color: rgba(0, 0, 0, 0.14);
  --soc-instruction-bg: rgba(255, 255, 255, 0.9);
  --soc-instruction-title: #1f1f1f;
  --soc-instruction-item: #374151;

  --soc-text-accent-soft: #c2410c;
  --soc-text-accent-muted: #7a7a7a;
  --soc-text-on-dark: #ffffff;
  --soc-text-soft: #6b7280;
  --soc-text-soft-2: #4b5563;
  --soc-text-soft-3: #374151;
  --soc-text-soft-4: #6b7280;
  --soc-text-soft-5: #64748b;
  --soc-text-soft-6: #475569;
  --soc-text-soft-7: #cbd5e1;
  --soc-text-soft-8: #334155;

  --soc-status-received-bg: rgba(242, 106, 27, 0.12);
  --soc-status-received-fg: #c2410c;
  --soc-status-progress-bg: rgba(237, 108, 2, 0.12);
  --soc-status-progress-fg: #b45309;
  --soc-status-closed-bg: rgba(46, 125, 50, 0.12);
  --soc-status-closed-fg: #2e7d32;
  --soc-status-online-border: rgba(46, 125, 50, 0.5);
  --soc-status-offline-border: rgba(211, 47, 47, 0.5);

  --soc-severity-low-bg: rgba(92, 92, 92, 0.12);
  --soc-severity-low-fg: #5c5c5c;
  --soc-severity-mid-bg: rgba(237, 108, 2, 0.14);
  --soc-severity-mid-fg: #b45309;
  --soc-severity-high-bg: rgba(211, 47, 47, 0.14);
  --soc-severity-high-fg: #b91c1c;

  --eci2-bg: rgba(237, 108, 2, 0.12);
  --eci2-border: rgba(237, 108, 2, 0.38);
  --eci2-fg: #b45309;
  --eci3-bg: rgba(220, 38, 38, 0.12);
  --eci3-border: #dc2626;
  --eci3-fg: #b91c1c;
  --eci4-bg: rgba(185, 28, 28, 0.18);
  --eci4-border: #7f1d1d;
  --eci4-fg: #7f1d1d;
  --eci34-bg: rgba(211, 47, 47, 0.12);
  --eci34-border: rgba(211, 47, 47, 0.38);
  --eci34-fg: #b91c1c;
  --soc-detail-accent-border: rgba(242, 106, 27, 0.28);
  --soc-detail-accent-line: #f26a1b;

  --soc-field-invalid-border: rgba(211, 47, 47, 0.88);
  --soc-field-invalid-ring: rgba(211, 47, 47, 0.24);
  --soc-danger-border-soft: rgba(211, 47, 47, 0.44);
  --soc-danger-soft-border: rgba(211, 47, 47, 0.38);
  --soc-toast-border: rgba(211, 47, 47, 0.65);
  --soc-toast-bg: rgba(185, 28, 28, 0.92);
  --soc-toast-fg: #fee2e2;

  --soc-timeline-line: rgba(148, 163, 184, 0.35);
  --soc-dot-default: rgba(148, 163, 184, 0.9);
  --soc-dot-status: rgba(242, 106, 27, 0.95);
  --status-dot-received: rgba(100, 116, 139, 0.95);
  --status-dot-inprogress: rgba(242, 106, 27, 0.95);
  --status-dot-closed: rgba(46, 125, 50, 0.95);
  --soc-dot-instruction: rgba(46, 125, 50, 0.95);
  --soc-dot-attachment: rgba(237, 108, 2, 0.95);
  --soc-dot-deleted: rgba(211, 47, 47, 0.95);

  --soc-divider-strong: rgba(17, 24, 39, 0.2);
  --soc-handle-bg: rgba(31, 31, 31, 0.34);
  --soc-handle-bg-strong: rgba(31, 31, 31, 0.5);
  --soc-tap-highlight: rgba(242, 106, 27, 0.24);
  --soc-focus-inset: rgba(242, 106, 27, 0.78);
  --soc-filter-chip-active-bg-strong: rgba(242, 106, 27, 0.2);
  --soc-filter-chip-active-border-strong: rgba(242, 106, 27, 0.56);

  --soc-app-tail-bg-1: rgba(255, 255, 255, 0.98);
  --soc-app-tail-bg-2: rgba(255, 255, 255, 1);
  --soc-filter-sheet-drag: 0px;
  --soc-notification-filter-drag: 0px;
  --soc-nav-sheet-drag: 0px;

  --soc-bg-glow-left: rgba(242, 106, 27, 0.12);
  --soc-bg-glow-right: rgba(92, 92, 92, 0.12);
  --soc-table-bg: rgba(255, 255, 255, 0.92);
  --soc-table-head-text: #374151;
  --soc-table-row-hover: rgba(0, 0, 0, 0.03);
  --soc-scrollbar-thumb: #d1d5db;
  --soc-scrollbar-track: #f5f5f5;

  --soc-radius-xs: 8px;
  --soc-radius-sm: 10px;
  --soc-radius-md: 12px;
  --soc-radius-card: 14px;
  --soc-radius-pill: 999px;

  --soc-space-1: 4px;
  --soc-space-2: 8px;
  --soc-space-3: 12px;
  --soc-space-4: 16px;
  --soc-space-5: 20px;
  --soc-space-6: 24px;
  --soc-space-8: 32px;

  --soc-font: var(--ui-font-family);
  --soc-text-xs: var(--type-label-sm-size);
  --soc-text-sm: var(--type-body-sm-size);
  --soc-text-md: var(--type-body-md-size);
  --soc-text-lg: var(--type-section-md-size);
  --soc-text-xl: var(--type-title-md-size);
  --soc-text-2xl: var(--type-title-lg-size);
  --soc-text-display: var(--type-display-lg-size);

  --soc-safe-top: env(safe-area-inset-top, 0px);
  --soc-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Legacy aliases */
  --bg: var(--soc-bg);
  --panel: var(--soc-surface);
  --panel-alt: var(--soc-surface-2);
  --text: var(--soc-text);
  --muted: var(--soc-muted);
  --accent: var(--soc-accent);
  --danger: var(--soc-danger);
  --warning: var(--soc-warning);
  --ok: var(--soc-success);
  --border: var(--soc-border);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-reduce-motion: 1;
  }
}

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

  --ui-bg-canvas: #0b1224;
  --ui-bg-surface: #111b33;
  --ui-bg-surface-2: #0f1930;
  --ui-bg-surface-muted: var(--ui-bg-surface-2);
  --ui-bg-inset: #0b1224;
  --ui-bg-elevated: #121e3f;
  --ui-border-subtle: #223055;
  --ui-border-strong: #2b3c6b;
  --ui-text-primary: #eaf0ff;
  --ui-text-secondary: #a9b6d3;
  --ui-text-tertiary: #6f7fa6;
  --ui-accent: #ff6b00;
  --ui-accent-weak: rgba(255, 107, 0, 0.14);
  --ui-success: #2ecc71;
  --ui-success-weak: rgba(46, 204, 113, 0.12);
  --ui-warning: #f5a524;
  --ui-warning-weak: rgba(245, 165, 36, 0.14);
  --ui-danger: #ff5c5c;
  --ui-danger-weak: rgba(255, 92, 92, 0.14);
  --ui-focus-ring: 0 0 0 2px rgba(255, 107, 0, 0.35);

  --soc-bg: var(--ui-bg-canvas);
  --soc-surface: var(--ui-bg-surface);
  --soc-surface-2: var(--ui-bg-surface-2);
  --soc-card-bg: #0f172a;
  --soc-panel-bg: #111a2e;
  --soc-soft-bg: #16213a;
  --soc-card-grad-1: #0f172a;
  --soc-card-grad-2: #111f36;
  --soc-text: var(--ui-text-primary);
  --soc-text-sub: var(--ui-text-secondary);
  --soc-muted: var(--soc-text-sub);
  --soc-primary: var(--ui-accent);
  --soc-primary-deep: #d65c10;
  --soc-primary-soft-bg: rgba(242, 106, 27, 0.14);
  --soc-on-primary: #f8fbff;
  --soc-accent: #7a5b43;
  --soc-success: var(--ui-success);
  --soc-info: #d48b47;
  --soc-warning: var(--ui-warning);
  --soc-danger: var(--ui-danger);
  --soc-danger-deep: #b91c1c;
  --soc-on-danger: #fee2e2;
  --soc-border: var(--ui-border-subtle);
  --soc-border-strong: var(--ui-border-strong);
  --soc-divider: #2a3a55;
  --soc-shadow: rgba(0, 0, 0, 0.25);
  --soc-shadow-soft: 0 6px 16px rgba(2, 6, 23, 0.24);
  --soc-shadow-card: 0 10px 28px rgba(2, 6, 23, 0.34);
  --soc-shadow-tabbar: 0 -10px 24px rgba(2, 8, 23, 0.34);
  --soc-ring: var(--ui-focus-ring);
  --soc-focus: rgba(255, 122, 26, 0.26);

  --soc-link: #ffb57d;
  --soc-link-hover: #ffd3b3;
  --soc-label: #c2d0e5;
  --soc-placeholder: #8093b1;

  --soc-input-bg: rgba(15, 23, 42, 0.84);
  --soc-input-border: var(--soc-border);
  --soc-input-focus: rgba(255, 107, 0, 0.35);
  --soc-topbar-bg: var(--soc-surface);

  --soc-topbar-bg-1: rgba(17, 26, 46, 0.96);
  --soc-topbar-bg-2: rgba(17, 26, 46, 0.86);
  --soc-tabbar-bg-1: rgba(17, 26, 46, 0.98);
  --soc-tabbar-bg-2: rgba(12, 18, 30, 0.98);
  --soc-tabbar-icon: #9fb1ce;
  --soc-tabbar-icon-active: #dbeafe;
  --soc-tabbar-active-bg: rgba(255, 122, 26, 0.18);
  --soc-tabbar-shadow: var(--soc-shadow-tabbar);
  --soc-tabbar-shadow-color: rgba(2, 8, 23, 0.34);
  --soc-tabbar-shadow-soft: rgba(2, 8, 23, 0.26);

  --soc-overlay-soft: rgba(2, 8, 23, 0.42);
  --soc-overlay-backdrop: rgba(2, 8, 23, 0.52);
  --soc-overlay-strong: rgba(2, 8, 23, 0.72);
  --soc-overlay-panel: rgba(2, 8, 23, 0.72);

  --soc-surface-overlay-1: rgba(15, 23, 42, 0.98);
  --soc-surface-overlay-2: rgba(15, 23, 42, 0.95);
  --soc-surface-overlay-3: rgba(15, 23, 42, 0.94);
  --soc-surface-overlay-4: rgba(17, 26, 46, 0.9);
  --soc-surface-overlay-5: rgba(17, 26, 46, 0.86);
  --soc-surface-overlay-6: rgba(15, 23, 42, 0.84);
  --soc-surface-overlay-7: rgba(15, 23, 42, 0.78);
  --soc-surface-overlay-8: rgba(15, 23, 42, 0.76);
  --soc-surface-overlay-9: rgba(11, 23, 42, 0.74);
  --soc-surface-overlay-10: rgba(15, 23, 42, 0.72);
  --soc-surface-overlay-11: rgba(11, 23, 42, 0.7);
  --soc-surface-overlay-12: rgba(15, 23, 42, 0.66);
  --soc-surface-overlay-13: rgba(15, 23, 42, 0.64);
  --soc-surface-overlay-14: rgba(30, 41, 59, 0.6);
  --soc-surface-overlay-15: rgba(148, 163, 184, 0.35);
  --soc-surface-overlay-16: rgba(15, 23, 42, 0.32);

  --soc-secondary-bg: #334155;
  --soc-secondary-bg-hover: #3f5169;
  --soc-secondary-border: rgba(148, 163, 184, 0.28);
  --soc-secondary-text: #e5e7eb;
  --soc-ghost-border: rgba(148, 163, 184, 0.34);
  --soc-ghost-text: #e2e8f0;
  --soc-ghost-hover-bg: rgba(148, 163, 184, 0.12);

  --soc-nav-item-bg: #192744;
  --soc-nav-item-active-bg: rgba(255, 122, 26, 0.18);
  --soc-nav-item-active-border: rgba(255, 153, 84, 0.48);
  --soc-nav-item-text: #ffffff;
  --soc-nav-sheet-bg: #1a1411;
  --soc-nav-sheet-divider: rgba(255, 255, 255, 0.22);
  --soc-nav-sheet-divider-active: rgba(255, 255, 255, 0.4);
  --soc-nav-sheet-handle: rgba(255, 255, 255, 0.54);
  --soc-nav-sheet-handle-active: rgba(255, 255, 255, 0.74);

  --soc-kpi-bg: rgba(11, 23, 42, 0.76);
  --soc-kpi-label: var(--soc-muted);
  --soc-kpi-value: #e5e7eb;
  --soc-block-bg: rgba(11, 23, 42, 0.72);
  --soc-mini-row-bg: rgba(17, 26, 46, 0.9);
  --soc-mini-row-text-strong: #dbeafe;

  --soc-filterbar-bg: rgba(11, 23, 42, 0.7);
  --soc-filter-chip-bg: rgba(15, 23, 42, 0.76);
  --soc-filter-chip-border: var(--soc-border);
  --soc-filter-chip-text: #d7e3f7;
  --soc-filter-chip-active-bg: rgba(255, 122, 26, 0.16);
  --soc-filter-chip-active-border: rgba(255, 153, 84, 0.52);
  --soc-filter-chip-active-text: #ffc79b;
  --soc-date-display-bg: rgba(11, 23, 42, 0.74);
  --soc-date-display-text: #e2e8f0;

  --soc-summary-grad-1: #101d33;
  --soc-summary-grad-2: #162846;
  --soc-summary-active-grad-1: #12274a;
  --soc-summary-active-grad-2: #19305b;
  --soc-summary-active-border: rgba(255, 143, 66, 0.58);
  --soc-summary-label: #a7bbdf;
  --soc-summary-value: #f8fafc;
  --soc-shimmer-1: rgba(30, 41, 59, 0.66);
  --soc-shimmer-2: rgba(71, 85, 105, 0.48);

  --soc-incident-grad-1: #0f172a;
  --soc-incident-grad-2: #111f36;
  --soc-incident-title: #e8eefc;
  --soc-incident-type: #b9cae8;
  --soc-incident-meta: #94a3b8;
  --soc-incident-pill-bg: rgba(30, 41, 59, 0.64);
  --soc-incident-pill-border: rgba(148, 163, 184, 0.25);
  --soc-incident-pill-text: #dae8ff;
  --soc-critical-text: #fca5a5;
  --soc-menu-bg: rgba(15, 23, 42, 0.98);
  --soc-menu-shadow: 0 10px 18px rgba(2, 8, 23, 0.46);
  --soc-menu-shadow-color: rgba(2, 8, 23, 0.46);
  --soc-instruction-bg: rgba(15, 23, 42, 0.66);
  --soc-instruction-title: #dbeafe;
  --soc-instruction-item: #e2e8f0;

  --soc-text-accent-soft: #dbeafe;
  --soc-text-accent-muted: #dbe7ff;
  --soc-text-on-dark: #ffffff;
  --soc-text-soft: #cbd5e1;
  --soc-text-soft-2: #c8daf4;
  --soc-text-soft-3: #d4dfef;
  --soc-text-soft-4: #94a3b8;
  --soc-text-soft-5: #64748b;
  --soc-text-soft-6: #475569;
  --soc-text-soft-7: #cbd5e1;
  --soc-text-soft-8: #e2e8f0;

  --soc-status-received-bg: rgba(255, 122, 26, 0.18);
  --soc-status-received-fg: #ffc89d;
  --soc-status-progress-bg: rgba(245, 158, 11, 0.18);
  --soc-status-progress-fg: #fde68a;
  --soc-status-closed-bg: rgba(22, 163, 74, 0.18);
  --soc-status-closed-fg: #bbf7d0;
  --soc-status-online-border: rgba(22, 163, 74, 0.5);
  --soc-status-offline-border: rgba(220, 38, 38, 0.52);

  --soc-severity-low-bg: rgba(122, 91, 67, 0.22);
  --soc-severity-low-fg: #e3c9af;
  --soc-severity-mid-bg: rgba(245, 158, 11, 0.22);
  --soc-severity-mid-fg: #fde68a;
  --soc-severity-high-bg: rgba(220, 38, 38, 0.22);
  --soc-severity-high-fg: #fecaca;

  --eci2-bg: rgba(245, 158, 11, 0.24);
  --eci2-border: rgba(245, 158, 11, 0.55);
  --eci2-fg: #fde68a;
  --eci3-bg: rgba(220, 38, 38, 0.26);
  --eci3-border: rgba(248, 113, 113, 0.74);
  --eci3-fg: #fecaca;
  --eci4-bg: rgba(127, 29, 29, 0.34);
  --eci4-border: rgba(252, 165, 165, 0.72);
  --eci4-fg: #fee2e2;
  --eci34-bg: rgba(220, 38, 38, 0.24);
  --eci34-border: rgba(220, 38, 38, 0.56);
  --eci34-fg: #fecaca;
  --soc-detail-accent-border: rgba(242, 106, 27, 0.34);
  --soc-detail-accent-line: #f59e0b;

  --soc-field-invalid-border: rgba(239, 68, 68, 0.95);
  --soc-field-invalid-ring: rgba(239, 68, 68, 0.28);
  --soc-danger-border-soft: rgba(220, 38, 38, 0.55);
  --soc-danger-soft-border: rgba(220, 38, 38, 0.46);
  --soc-toast-border: rgba(248, 113, 113, 0.72);
  --soc-toast-bg: rgba(127, 29, 29, 0.95);
  --soc-toast-fg: #fee2e2;

  --soc-timeline-line: rgba(148, 163, 184, 0.35);
  --soc-dot-default: rgba(148, 163, 184, 0.9);
  --soc-dot-status: rgba(255, 122, 26, 0.95);
  --status-dot-received: rgba(148, 163, 184, 0.95);
  --status-dot-inprogress: rgba(255, 122, 26, 0.95);
  --status-dot-closed: rgba(22, 163, 74, 0.95);
  --soc-dot-instruction: rgba(16, 185, 129, 0.95);
  --soc-dot-attachment: rgba(245, 158, 11, 0.95);
  --soc-dot-deleted: rgba(220, 38, 38, 0.95);

  --soc-divider-strong: rgba(148, 163, 184, 0.2);
  --soc-handle-bg: rgba(226, 232, 240, 0.34);
  --soc-handle-bg-strong: rgba(226, 232, 240, 0.5);
  --soc-tap-highlight: rgba(255, 122, 26, 0.24);
  --soc-focus-inset: rgba(255, 153, 84, 0.88);
  --soc-filter-chip-active-bg-strong: rgba(255, 122, 26, 0.28);
  --soc-filter-chip-active-border-strong: rgba(255, 153, 84, 0.58);

  --soc-bg-glow-left: rgba(255, 122, 26, 0.18);
  --soc-bg-glow-right: rgba(122, 91, 67, 0.12);
  --soc-table-bg: rgba(15, 23, 42, 0.7);
  --soc-table-head-text: #dbe7ff;
  --soc-table-row-hover: rgba(148, 163, 184, 0.08);
  --soc-scrollbar-thumb: #334155;
  --soc-scrollbar-track: #0b1220;

  --soc-app-tail-bg-1: rgba(11, 18, 32, 0.98);
  --soc-app-tail-bg-2: rgba(11, 18, 32, 1);
  --soc-filter-sheet-drag: 0px;
  --soc-notification-filter-drag: 0px;
  --soc-nav-sheet-drag: 0px;
}

:root {
  --color-brand-900: #241a14;
  --color-brand-800: #37261b;
  --color-brand-700: #683a1c;
  --color-brand-600: var(--ui-accent);
  --color-brand-500: #ff9651;
  --color-accent-500: #c06f37;
  --color-info: #bc6c2c;

  --bg-app: #f4f6f8;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f8fafc;
  --border-subtle: #d8dee6;
  --border-default: #cbd5e1;
  --divider-default: #d2dae5;
  --text-primary: #101828;
  --text-secondary: #667085;

  --ui-bg-canvas: var(--bg-app);
  --ui-bg-surface: var(--bg-surface);
  --ui-bg-surface-2: var(--bg-surface-subtle);
  --ui-bg-surface-muted: var(--bg-surface-subtle);
  --ui-bg-inset: var(--bg-surface-subtle);
  --ui-bg-elevated: var(--bg-surface);
  --ui-border-subtle: var(--border-subtle);
  --ui-border-strong: var(--border-default);
  --ui-divider-default: var(--divider-default);
  --ui-text-primary: var(--text-primary);
  --ui-text-secondary: var(--text-secondary);
  --ui-text-tertiary: #8d99a8;
  --ui-accent: #ef6c1a;
  --ui-accent-weak: #fff0e3;
  --ui-focus-ring: 0 0 0 2px rgba(239, 108, 26, 0.32);

  --soc-card-bg: #ffffff;
  --soc-panel-bg: var(--bg-surface);
  --soc-soft-bg: var(--bg-surface-subtle);
  --soc-card-grad-1: #ffffff;
  --soc-card-grad-2: var(--bg-surface-subtle);
  --soc-primary: var(--ui-accent);
  --soc-primary-deep: #c75210;
  --soc-primary-soft-bg: rgba(239, 108, 26, 0.12);
  --soc-accent: #364152;
  --soc-info: #bc6c2c;
  --soc-border: var(--ui-border-subtle);
  --soc-border-strong: var(--ui-border-strong);
  --soc-divider: var(--ui-divider-default);
  --soc-shadow: rgba(23, 31, 45, 0.08);
  --soc-shadow-soft: 0 1px 3px rgba(23, 31, 45, 0.08);
  --soc-shadow-card: 0 14px 30px rgba(23, 31, 45, 0.09);
  --soc-shadow-tabbar: 0 -10px 22px rgba(23, 31, 45, 0.12);
  --soc-focus: rgba(239, 108, 26, 0.26);

  --soc-link: #ab4f17;
  --soc-link-hover: #8d4011;
  --soc-label: #556171;
  --soc-placeholder: #8c98a8;
  --soc-input-bg: #ffffff;
  --soc-input-border: #b6c2cf;
  --soc-input-focus: rgba(239, 108, 26, 0.28);
  --soc-topbar-bg: var(--soc-surface);
  --soc-topbar-bg-1: rgba(252, 253, 255, 0.94);
  --soc-topbar-bg-2: rgba(248, 250, 253, 0.88);

  --soc-tabbar-bg-1: rgba(252, 250, 246, 0.96);
  --soc-tabbar-bg-2: rgba(248, 243, 236, 0.98);
  --soc-tabbar-icon: #7f6f61;
  --soc-tabbar-icon-active: var(--soc-primary);
  --soc-tabbar-active-bg: rgba(239, 108, 26, 0.14);
  --soc-tabbar-shadow-color: rgba(37, 26, 18, 0.12);
  --soc-tabbar-shadow-soft: rgba(37, 26, 18, 0.1);

  --soc-secondary-bg: var(--bg-surface-subtle);
  --soc-secondary-bg-hover: #e6ebf1;
  --soc-secondary-border: var(--border-default);
  --soc-secondary-text: #2e3948;
  --soc-ghost-border: var(--border-default);
  --soc-ghost-text: #44505f;
  --soc-ghost-hover-bg: var(--bg-surface-subtle);

  --soc-nav-item-bg: #eef2f6;
  --soc-nav-item-active-bg: rgba(239, 108, 26, 0.12);
  --soc-nav-item-active-border: rgba(239, 108, 26, 0.42);
  --soc-nav-item-text: #1c2430;
  --soc-nav-sheet-bg: #f4f7fb;
  --soc-nav-sheet-divider: rgba(101, 116, 133, 0.14);
  --soc-nav-sheet-divider-active: rgba(101, 116, 133, 0.22);
  --soc-nav-sheet-handle: rgba(101, 116, 133, 0.28);
  --soc-nav-sheet-handle-active: rgba(101, 116, 133, 0.4);

  --soc-kpi-bg: var(--bg-surface);
  --soc-kpi-label: #6c7887;
  --soc-kpi-value: #1d2530;
  --soc-block-bg: var(--bg-surface);
  --soc-mini-row-bg: rgba(255, 255, 255, 0.98);
  --soc-mini-row-text-strong: #364152;

  --soc-filterbar-bg: var(--bg-surface);
  --soc-filter-chip-bg: #f0f4f8;
  --soc-filter-chip-border: #c5cfda;
  --soc-filter-chip-text: #43505f;
  --soc-filter-chip-active-bg: rgba(239, 108, 26, 0.12);
  --soc-filter-chip-active-border: rgba(239, 108, 26, 0.46);
  --soc-filter-chip-active-text: #c25a18;
  --soc-date-display-bg: #ffffff;
  --soc-date-display-text: #1d2530;

  --soc-summary-grad-1: #fffdfa;
  --soc-summary-grad-2: #f6efe6;
  --soc-summary-active-grad-1: #fff2e7;
  --soc-summary-active-grad-2: #ffe2cc;
  --soc-summary-active-border: rgba(239, 108, 26, 0.48);
  --soc-summary-label: #6a7685;
  --soc-summary-value: #1d2530;

  --soc-incident-grad-1: #fffdfa;
  --soc-incident-grad-2: #f7f0e8;
  --soc-incident-title: #1d2530;
  --soc-incident-type: #4b5868;
  --soc-incident-meta: #6f7c8d;
  --soc-incident-pill-bg: #eef2f6;
  --soc-incident-pill-border: #c5cfda;
  --soc-incident-pill-text: #364152;
  --soc-menu-bg: rgba(248, 250, 253, 0.98);
  --soc-instruction-bg: rgba(255, 255, 255, 0.92);
  --soc-instruction-title: #1d2530;
  --soc-instruction-item: #44505f;

  --soc-text-accent-soft: #c25b1b;
  --soc-text-accent-muted: #8b6b55;
  --soc-text-soft: #667384;
  --soc-text-soft-2: #4e5b6b;
  --soc-text-soft-3: #43505f;
  --soc-text-soft-4: #6f7c8d;
  --soc-text-soft-5: #7f8b98;
  --soc-text-soft-6: #596575;
  --soc-text-soft-8: #2f3947;

  --soc-status-received-bg: rgba(239, 108, 26, 0.12);
  --soc-status-received-fg: #b75418;
  --soc-severity-low-bg: rgba(78, 91, 107, 0.12);
  --soc-severity-low-fg: #4e5b6b;

  --soc-detail-accent-border: rgba(239, 108, 26, 0.28);
  --soc-detail-accent-line: #ef6c1a;
  --soc-dot-status: rgba(239, 108, 26, 0.95);
  --status-dot-inprogress: rgba(239, 108, 26, 0.95);
  --soc-tap-highlight: rgba(239, 108, 26, 0.2);
  --soc-focus-inset: rgba(239, 108, 26, 0.82);
  --soc-filter-chip-active-bg-strong: rgba(239, 108, 26, 0.18);
  --soc-filter-chip-active-border-strong: rgba(239, 108, 26, 0.54);

  --soc-bg-glow-left: rgba(239, 108, 26, 0.12);
  --soc-bg-glow-right: rgba(78, 91, 107, 0.08);
  --soc-table-bg: var(--bg-surface);
  --soc-table-head-text: #405062;
  --soc-table-row-hover: rgba(16, 24, 40, 0.03);
  --soc-sidebar-bg-1: #f8fafc;
  --soc-sidebar-bg-2: #eef3f8;
  --soc-sidebar-divider: var(--ui-divider-default);
  --soc-sidebar-text: #1c2734;
  --soc-sidebar-text-muted: #778394;
  --soc-sidebar-icon: #5d6979;
  --soc-sidebar-row-hover: rgba(16, 24, 40, 0.04);
  --soc-sidebar-active-bg: rgba(239, 108, 26, 0.12);
  --soc-sidebar-active-rail: #ff7a1a;
  --soc-sidebar-active-text: #111a24;
  --soc-scrollbar-thumb: #bcc7d3;
  --soc-scrollbar-track: #eef2f6;
  --soc-app-tail-bg-1: rgba(243, 245, 248, 0.98);
  --soc-app-tail-bg-2: rgba(243, 245, 248, 1);

  --soc-sidebar-bg-1: #f8fafc;
  --soc-sidebar-bg-2: #eef3f8;
  --soc-sidebar-divider: var(--ui-divider-default);
  --soc-sidebar-text: #1c2734;
  --soc-sidebar-text-muted: #778394;
  --soc-sidebar-icon: #5d6979;
  --soc-sidebar-row-hover: rgba(18, 28, 42, 0.04);
  --soc-sidebar-active-bg: rgba(239, 108, 26, 0.12);
  --soc-sidebar-active-rail: #ff7a1a;
  --soc-sidebar-active-text: #111a24;
}

[data-theme="dark"] {
  --color-brand-900: #15100d;
  --color-brand-800: #221915;
  --color-brand-700: #482714;
  --color-brand-600: var(--ui-accent);
  --color-brand-500: #ff9954;
  --color-accent-500: #c8864d;
  --color-info: #d48b47;

  --ui-bg-canvas: #121821;
  --ui-bg-surface: #18202b;
  --ui-bg-surface-2: #131a24;
  --ui-bg-surface-muted: #1b2430;
  --ui-bg-inset: #0f141c;
  --ui-bg-elevated: #202938;
  --ui-border-subtle: #3b4756;
  --ui-border-strong: #5d6c7d;
  --ui-text-primary: #f2ebe6;
  --ui-text-secondary: #b8aa9d;
  --ui-text-tertiary: #8c7d70;
  --ui-accent: #ff7a1a;
  --ui-accent-weak: rgba(255, 122, 26, 0.16);
  --ui-focus-ring: 0 0 0 2px rgba(255, 122, 26, 0.34);

  --soc-card-bg: #18202b;
  --soc-panel-bg: #1c2430;
  --soc-soft-bg: #212b38;
  --soc-card-grad-1: #18202b;
  --soc-card-grad-2: #1f2834;
  --soc-primary: var(--ui-accent);
  --soc-primary-deep: #d65c10;
  --soc-primary-soft-bg: rgba(255, 122, 26, 0.14);
  --soc-on-primary: #fff6ef;
  --soc-accent: #7e8fa4;
  --soc-info: #d48b47;
  --soc-divider: #445264;
  --soc-shadow: rgba(0, 0, 0, 0.34);
  --soc-shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.26);
  --soc-shadow-card: 0 16px 34px rgba(0, 0, 0, 0.38);
  --soc-shadow-tabbar: 0 -12px 24px rgba(0, 0, 0, 0.34);
  --soc-focus: rgba(255, 122, 26, 0.26);

  --soc-link: #ffb57d;
  --soc-link-hover: #ffd3b3;
  --soc-label: #c8d2de;
  --soc-placeholder: #8491a1;
  --soc-input-bg: rgba(22, 30, 40, 0.92);
  --soc-input-border: #546375;
  --soc-input-focus: rgba(255, 122, 26, 0.28);
  --soc-topbar-bg: var(--soc-surface);
  --soc-topbar-bg-1: rgba(24, 32, 43, 0.96);
  --soc-topbar-bg-2: rgba(24, 32, 43, 0.88);

  --soc-tabbar-bg-1: rgba(24, 32, 43, 0.98);
  --soc-tabbar-bg-2: rgba(15, 21, 30, 0.98);
  --soc-tabbar-icon: #bcaea1;
  --soc-tabbar-icon-active: #ffc79b;
  --soc-tabbar-active-bg: rgba(255, 122, 26, 0.18);
  --soc-tabbar-shadow-color: rgba(0, 0, 0, 0.28);
  --soc-tabbar-shadow-soft: rgba(0, 0, 0, 0.24);

  --soc-secondary-bg: #24303d;
  --soc-secondary-bg-hover: #2b3949;
  --soc-secondary-border: rgba(200, 212, 226, 0.22);
  --soc-secondary-text: #eee4dc;
  --soc-ghost-border: rgba(200, 212, 226, 0.22);
  --soc-ghost-text: #dfe7f0;
  --soc-ghost-hover-bg: rgba(255, 255, 255, 0.05);

  --soc-nav-item-bg: #25303d;
  --soc-nav-item-active-bg: rgba(255, 122, 26, 0.18);
  --soc-nav-item-active-border: rgba(255, 153, 84, 0.48);
  --soc-nav-item-text: #fff2e9;
  --soc-nav-sheet-bg: #121a25;
  --soc-nav-sheet-divider: rgba(188, 201, 216, 0.12);
  --soc-nav-sheet-divider-active: rgba(188, 201, 216, 0.22);
  --soc-nav-sheet-handle: rgba(188, 201, 216, 0.32);
  --soc-nav-sheet-handle-active: rgba(188, 201, 216, 0.46);

  --soc-kpi-bg: rgba(24, 32, 43, 0.84);
  --soc-kpi-label: #b6c2d1;
  --soc-kpi-value: #f3ece7;
  --soc-block-bg: rgba(24, 32, 43, 0.82);
  --soc-mini-row-bg: rgba(28, 36, 48, 0.94);
  --soc-mini-row-text-strong: #f0e7df;

  --soc-filterbar-bg: rgba(22, 30, 40, 0.86);
  --soc-filter-chip-bg: rgba(31, 40, 52, 0.9);
  --soc-filter-chip-border: rgba(188, 201, 216, 0.16);
  --soc-filter-chip-text: #e7dbd1;
  --soc-filter-chip-active-bg: rgba(255, 122, 26, 0.16);
  --soc-filter-chip-active-border: rgba(255, 153, 84, 0.52);
  --soc-filter-chip-active-text: #ffc79b;
  --soc-date-display-bg: rgba(21, 29, 39, 0.9);
  --soc-date-display-text: #f3ebe5;

  --soc-summary-grad-1: #1a222c;
  --soc-summary-grad-2: #232d39;
  --soc-summary-active-grad-1: #36241b;
  --soc-summary-active-grad-2: #452a1b;
  --soc-summary-active-border: rgba(255, 143, 66, 0.58);
  --soc-summary-label: #c1b2a6;
  --soc-summary-value: #fff3ea;

  --soc-incident-grad-1: #18202b;
  --soc-incident-grad-2: #202934;
  --soc-incident-title: #f3ebe5;
  --soc-incident-type: #c6d1de;
  --soc-incident-meta: #96a4b5;
  --soc-incident-pill-bg: rgba(34, 43, 56, 0.74);
  --soc-incident-pill-border: rgba(188, 201, 216, 0.16);
  --soc-incident-pill-text: #efe5dc;
  --soc-critical-text: #ffc2c2;
  --soc-menu-bg: rgba(18, 26, 37, 0.98);
  --soc-menu-shadow: 0 12px 22px rgba(0, 0, 0, 0.46);
  --soc-menu-shadow-color: rgba(0, 0, 0, 0.42);
  --soc-instruction-bg: rgba(24, 32, 43, 0.74);
  --soc-instruction-title: #f0e7df;
  --soc-instruction-item: #e7dbd1;

  --soc-text-accent-soft: #ffbe8a;
  --soc-text-accent-muted: #e2a476;
  --soc-text-soft: #ccd5df;
  --soc-text-soft-2: #c1ccd8;
  --soc-text-soft-3: #d6dee8;
  --soc-text-soft-4: #99a7b8;
  --soc-text-soft-5: #7f8e9f;
  --soc-text-soft-6: #667485;
  --soc-text-soft-8: #f0e7df;

  --soc-status-received-bg: rgba(255, 122, 26, 0.18);
  --soc-status-received-fg: #ffc89d;
  --soc-status-progress-bg: rgba(245, 158, 11, 0.18);
  --soc-status-progress-fg: #fde3ab;
  --soc-severity-low-bg: rgba(94, 110, 129, 0.24);
  --soc-severity-low-fg: #d4dfeb;

  --soc-detail-accent-border: rgba(255, 122, 26, 0.32);
  --soc-detail-accent-line: #ff8e42;
  --soc-dot-status: rgba(255, 122, 26, 0.95);
  --status-dot-inprogress: rgba(255, 122, 26, 0.95);
  --soc-dot-instruction: rgba(52, 211, 153, 0.95);

  --soc-tap-highlight: rgba(255, 122, 26, 0.24);
  --soc-focus-inset: rgba(255, 153, 84, 0.88);
  --soc-filter-chip-active-bg-strong: rgba(255, 122, 26, 0.28);
  --soc-filter-chip-active-border-strong: rgba(255, 153, 84, 0.58);
  --soc-bg-glow-left: rgba(255, 122, 26, 0.18);
  --soc-bg-glow-right: rgba(94, 110, 129, 0.14);
  --soc-table-bg: rgba(22, 30, 40, 0.82);
  --soc-table-head-text: #dce5f0;
  --soc-table-row-hover: rgba(188, 201, 216, 0.06);
  --soc-scrollbar-thumb: #566476;
  --soc-scrollbar-track: #121a25;
  --soc-app-tail-bg-1: rgba(18, 24, 33, 0.98);
  --soc-app-tail-bg-2: rgba(18, 24, 33, 1);

  --soc-sidebar-bg-1: #131c27;
  --soc-sidebar-bg-2: #0d131c;
  --soc-sidebar-divider: rgba(188, 201, 216, 0.12);
  --soc-sidebar-text: rgba(244, 247, 252, 0.92);
  --soc-sidebar-text-muted: rgba(172, 183, 195, 0.62);
  --soc-sidebar-icon: rgba(216, 225, 236, 0.78);
  --soc-sidebar-row-hover: rgba(255, 255, 255, 0.05);
  --soc-sidebar-active-bg: rgba(255, 122, 26, 0.16);
  --soc-sidebar-active-rail: #ff7a1a;
  --soc-sidebar-active-text: #fff4ea;
}

/* Shople reference alignment overrides */
:root {
  --bg-app: #f6f7fb;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f2f5fa;
  --border-subtle: #e6eaf1;
  --border-default: #d7dee8;
  --divider-default: #e6eaf1;
  --text-primary: #202430;
  --text-secondary: #697286;

  --ui-bg-canvas: var(--bg-app);
  --ui-bg-surface: var(--bg-surface);
  --ui-bg-surface-2: var(--bg-surface-subtle);
  --ui-bg-surface-muted: var(--bg-surface-subtle);
  --ui-bg-inset: var(--bg-surface-subtle);
  --ui-bg-elevated: var(--bg-surface);
  --ui-border-subtle: var(--border-subtle);
  --ui-border-strong: var(--border-default);
  --ui-divider-default: var(--divider-default);
  --ui-text-primary: var(--text-primary);
  --ui-text-secondary: var(--text-secondary);
  --ui-text-tertiary: #9aa3b2;
  --ui-accent: #ff6a13;
  --ui-accent-weak: #fff1e6;
  --ui-success: #1ebfa3;
  --ui-success-weak: #e8f9f5;
  --ui-warning: #ffbf3c;
  --ui-warning-weak: #fff7df;
  --ui-danger: #ff6b6b;
  --ui-danger-weak: #fff0f0;
  --ui-focus-ring: 0 0 0 2px rgba(255, 106, 19, 0.28);

  --soc-primary: var(--ui-accent);
  --soc-primary-deep: #e65a07;
  --soc-primary-soft-bg: #fff0e6;
  --soc-accent: #364152;
  --soc-info: #2f80ff;
  --soc-success: var(--ui-success);
  --soc-warning: var(--ui-warning);
  --soc-danger: var(--ui-danger);
  --soc-border: var(--ui-border-subtle);
  --soc-border-strong: var(--ui-border-strong);
  --soc-divider: var(--ui-divider-default);
  --soc-shadow: rgba(16, 24, 40, 0.06);
  --soc-shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.04);
  --soc-shadow-card: 0 10px 24px rgba(16, 24, 40, 0.08);
  --soc-shadow-tabbar: none;
  --soc-focus: rgba(255, 106, 19, 0.28);
  --soc-link: #cf550b;
  --soc-link-hover: #ac4300;
  --soc-label: #697286;
  --soc-placeholder: #a2a9b5;

  --soc-topbar-bg-1: rgba(255, 255, 255, 0.94);
  --soc-topbar-bg-2: rgba(255, 255, 255, 0.94);
  --soc-tabbar-bg-1: rgba(255, 255, 255, 0.98);
  --soc-tabbar-bg-2: rgba(255, 255, 255, 0.98);
  --soc-tabbar-active-bg: rgba(255, 106, 19, 0.12);
  --soc-tabbar-shadow-color: rgba(0, 0, 0, 0.08);
  --soc-tabbar-shadow-soft: rgba(0, 0, 0, 0.06);

  --soc-nav-item-bg: #eef2f6;
  --soc-nav-item-active-bg: rgba(255, 106, 19, 0.12);
  --soc-nav-item-active-border: rgba(255, 106, 19, 0.24);
  --soc-nav-sheet-bg: #f6f7fb;

  --soc-filterbar-bg: rgba(255, 255, 255, 0.98);
  --soc-filter-chip-bg: #f0f4f8;
  --soc-filter-chip-border: #d7dee8;
  --soc-filter-chip-active-bg: rgba(255, 106, 19, 0.1);
  --soc-filter-chip-active-border: rgba(255, 106, 19, 0.22);
  --soc-filter-chip-active-text: #cf550b;

  --soc-summary-grad-1: #ffffff;
  --soc-summary-grad-2: #ffffff;
  --soc-summary-active-grad-1: #fff3ea;
  --soc-summary-active-grad-2: #fff3ea;
  --soc-summary-active-border: rgba(255, 106, 19, 0.22);

  --soc-radius-xs: 8px;
  --soc-radius-sm: 8px;
  --soc-radius-md: 12px;
  --soc-radius-card: 12px;
  --soc-control-height-sm: 36px;
  --soc-control-height-md: 40px;
  --soc-tab-height: 36px;
}

[data-theme="dark"] {
  --ui-accent: #ff7a1a;
  --ui-accent-weak: rgba(255, 122, 26, 0.16);
  --ui-success: #2bc0a8;
  --ui-warning: #ffc85a;
  --ui-danger: #ff7878;
  --soc-radius-sm: 8px;
  --soc-radius-md: 12px;
  --soc-radius-card: 12px;
  --soc-control-height-sm: 36px;
  --soc-control-height-md: 40px;
  --soc-tab-height: 36px;
}

/* ===== Final dark-mode token authority ===== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #0b1321;
  --bg-surface: #121c2f;
  --bg-surface-subtle: #0f1828;
  --border-subtle: #23324e;
  --border-default: #30415f;
  --divider-default: #22314d;
  --text-primary: #eaf0ff;
  --text-secondary: #a8b5cf;

  --ui-bg-canvas: var(--bg-app);
  --ui-bg-surface: var(--bg-surface);
  --ui-bg-surface-2: var(--bg-surface-subtle);
  --ui-bg-surface-muted: var(--bg-surface-subtle);
  --ui-bg-inset: #0a111d;
  --ui-bg-elevated: #172338;
  --ui-border-subtle: var(--border-subtle);
  --ui-border-strong: var(--border-default);
  --ui-divider-default: var(--divider-default);
  --ui-text-primary: var(--text-primary);
  --ui-text-secondary: var(--text-secondary);
  --ui-text-tertiary: #7f8da8;
  --ui-accent: #ff7a1a;
  --ui-accent-weak: rgba(255, 122, 26, 0.18);
  --ui-success: #25c4ab;
  --ui-success-weak: rgba(37, 196, 171, 0.16);
  --ui-warning: #ffca62;
  --ui-warning-weak: rgba(255, 202, 98, 0.16);
  --ui-danger: #ff7d7d;
  --ui-danger-weak: rgba(255, 125, 125, 0.16);
  --ui-focus-ring: 0 0 0 2px rgba(255, 122, 26, 0.34);

  --soc-bg: var(--ui-bg-canvas);
  --soc-surface: var(--ui-bg-surface);
  --soc-surface-2: var(--ui-bg-surface-2);
  --soc-card-bg: var(--ui-bg-surface);
  --soc-panel-bg: #142033;
  --soc-soft-bg: #101a2a;
  --soc-card-grad-1: var(--ui-bg-surface);
  --soc-card-grad-2: var(--ui-bg-surface);
  --soc-primary: var(--ui-accent);
  --soc-primary-deep: #dc5f0b;
  --soc-primary-soft-bg: rgba(255, 122, 26, 0.16);
  --soc-on-primary: #fff6ef;
  --soc-accent: #8ea2c2;
  --soc-info: #7aa2ff;
  --soc-success: var(--ui-success);
  --soc-warning: var(--ui-warning);
  --soc-danger: var(--ui-danger);
  --soc-border: var(--ui-border-subtle);
  --soc-border-strong: var(--ui-border-strong);
  --soc-divider: var(--ui-divider-default);
  --soc-shadow: rgba(2, 6, 23, 0.34);
  --soc-shadow-soft: 0 8px 18px rgba(2, 6, 23, 0.28);
  --soc-shadow-card: 0 16px 34px rgba(2, 6, 23, 0.38);
  --soc-shadow-tabbar: 0 -12px 24px rgba(2, 6, 23, 0.34);
  --soc-focus: rgba(255, 122, 26, 0.28);
  --soc-link: #ffb37b;
  --soc-link-hover: #ffd0ad;
  --soc-label: #c9d4e6;
  --soc-placeholder: #8394b0;
  --soc-input-bg: #0f1828;
  --soc-input-border: var(--ui-border-subtle);
  --soc-input-focus: rgba(255, 122, 26, 0.34);
  --soc-topbar-bg: var(--ui-bg-surface);
  --soc-topbar-bg-1: rgba(18, 28, 47, 0.96);
  --soc-topbar-bg-2: rgba(18, 28, 47, 0.92);
  --soc-tabbar-bg-1: rgba(18, 28, 47, 0.98);
  --soc-tabbar-bg-2: rgba(13, 19, 33, 0.98);
  --soc-tabbar-icon: #9fb1ce;
  --soc-tabbar-icon-active: #ebf1ff;
  --soc-tabbar-active-bg: rgba(255, 122, 26, 0.16);
  --soc-tabbar-shadow-color: rgba(2, 6, 23, 0.34);
  --soc-tabbar-shadow-soft: rgba(2, 6, 23, 0.24);

  --soc-nav-item-bg: #121e32;
  --soc-nav-item-active-bg: rgba(255, 122, 26, 0.16);
  --soc-nav-item-active-border: rgba(255, 122, 26, 0.28);
  --soc-nav-item-text: #edf3ff;
  --soc-nav-sheet-bg: #0f1828;
  --soc-nav-sheet-divider: rgba(128, 149, 182, 0.18);
  --soc-nav-sheet-divider-active: rgba(128, 149, 182, 0.28);
  --soc-nav-sheet-handle: rgba(128, 149, 182, 0.28);
  --soc-nav-sheet-handle-active: rgba(128, 149, 182, 0.4);

  --soc-kpi-bg: var(--ui-bg-surface);
  --soc-kpi-label: #9aabc7;
  --soc-kpi-value: #f1f5ff;
  --soc-block-bg: var(--ui-bg-surface);
  --soc-mini-row-bg: rgba(15, 24, 40, 0.94);
  --soc-mini-row-text-strong: #edf2ff;

  --soc-filterbar-bg: rgba(18, 28, 47, 0.94);
  --soc-filter-chip-bg: #152338;
  --soc-filter-chip-border: #253654;
  --soc-filter-chip-text: #cfdaed;
  --soc-filter-chip-active-bg: rgba(255, 122, 26, 0.14);
  --soc-filter-chip-active-border: rgba(255, 122, 26, 0.26);
  --soc-filter-chip-active-text: #ffc194;
  --soc-date-display-bg: #121c2f;
  --soc-date-display-text: #edf2ff;

  --soc-summary-grad-1: var(--ui-bg-surface);
  --soc-summary-grad-2: var(--ui-bg-surface);
  --soc-summary-active-grad-1: rgba(255, 122, 26, 0.1);
  --soc-summary-active-grad-2: rgba(255, 122, 26, 0.1);
  --soc-summary-active-border: rgba(255, 122, 26, 0.28);

  --soc-incident-grad-1: var(--ui-bg-surface);
  --soc-incident-grad-2: var(--ui-bg-surface);
  --soc-incident-title: #edf2ff;
  --soc-incident-type: #c6d2e6;
  --soc-incident-meta: #8ea1be;
  --soc-incident-pill-bg: #152338;
  --soc-incident-pill-border: #273756;
  --soc-incident-pill-text: #d9e4f5;
  --soc-menu-bg: rgba(18, 28, 47, 0.98);
  --soc-instruction-bg: rgba(15, 24, 40, 0.94);
  --soc-instruction-title: #edf2ff;
  --soc-instruction-item: #c7d2e6;

  --soc-text-accent-soft: #ffb27a;
  --soc-text-accent-muted: #c89f81;
  --soc-text-soft: #93a4bf;
  --soc-text-soft-2: #b5c3d8;
  --soc-text-soft-3: #c7d3e6;
  --soc-text-soft-4: #8fa2bf;
  --soc-text-soft-5: #7f93b0;
  --soc-text-soft-6: #9caec8;
  --soc-text-soft-8: #eef3ff;

  --soc-status-received-bg: rgba(255, 122, 26, 0.16);
  --soc-status-received-fg: #ffb987;
  --soc-severity-low-bg: rgba(127, 147, 176, 0.16);
  --soc-severity-low-fg: #d2dced;

  --soc-detail-accent-border: rgba(255, 122, 26, 0.26);
  --soc-detail-accent-line: var(--ui-accent);
  --soc-dot-status: rgba(255, 122, 26, 0.95);
  --status-dot-inprogress: rgba(255, 122, 26, 0.95);
  --soc-tap-highlight: rgba(255, 122, 26, 0.22);
  --soc-focus-inset: rgba(255, 122, 26, 0.84);
  --soc-filter-chip-active-bg-strong: rgba(255, 122, 26, 0.18);
  --soc-filter-chip-active-border-strong: rgba(255, 122, 26, 0.32);

  --soc-bg-glow-left: rgba(255, 122, 26, 0.08);
  --soc-bg-glow-right: rgba(122, 162, 255, 0.06);
  --soc-table-bg: rgba(18, 28, 47, 0.94);
  --soc-table-head-text: #dbe6f7;
  --soc-table-row-hover: rgba(148, 163, 184, 0.08);
  --soc-sidebar-bg-1: #0c1422;
  --soc-sidebar-bg-2: #101a2c;
  --soc-sidebar-divider: rgba(128, 149, 182, 0.16);
  --soc-sidebar-text: #eef3ff;
  --soc-sidebar-text-muted: #9fb1cb;
  --soc-sidebar-icon: #d8e1ec;
  --soc-sidebar-row-hover: rgba(255, 255, 255, 0.05);
  --soc-sidebar-active-bg: rgba(255, 122, 26, 0.18);
  --soc-sidebar-active-rail: #ff7a1a;
  --soc-sidebar-active-text: #fff4ea;
  --soc-scrollbar-thumb: #334764;
  --soc-scrollbar-track: #0a111d;
  --soc-app-tail-bg-1: rgba(11, 19, 33, 0.98);
  --soc-app-tail-bg-2: rgba(11, 19, 33, 1);
}