:root {
  --iv-space-1: 4px;
  --iv-space-2: 8px;
  --iv-space-3: 12px;
  --iv-space-4: 16px;
  --iv-space-5: 24px;
  --iv-space-6: 32px;

  --iv-touch-min: 44px;

  --iv-text-xs: 0.68rem;
  --iv-text-sm: 0.78rem;
  --iv-text-md: 0.9rem;
  --iv-text-lg: 1.1rem;

  --iv-panel-radius: 8px;
  --iv-panel-gap: 14px;
  --iv-content-max: 1600px;

  --iv-page-bg:
    radial-gradient(circle at top center, rgba(37, 73, 128, 0.16), transparent 34%),
    linear-gradient(180deg, #02060c 0%, #02060b 38%, #03080f 100%);
  --iv-bg-secondary: #07111e;
  --iv-panel-bg: rgba(8, 18, 32, 0.84);
  --iv-panel-bg-strong: rgba(10, 22, 39, 0.94);
  --iv-panel-bg-soft: rgba(10, 20, 35, 0.7);
  --iv-border: rgba(126, 153, 196, 0.16);
  --iv-border-strong: rgba(157, 183, 223, 0.28);
  --iv-text-primary: #e6ecf5;
  --iv-text-secondary: #a5b0c1;
  --iv-text-muted: #7e899b;
  --iv-text-muted-theme: #7e899b;
  --iv-surface: rgba(8, 18, 32, 0.84);
  --iv-surface-raised: rgba(10, 22, 39, 0.94);
  --iv-input-bg: rgba(8, 18, 32, 0.95);
  --iv-input-border: #65758a;
  --iv-button-bg: rgba(12, 24, 40, 0.86);
  --iv-button-hover: rgba(16, 32, 54, 0.96);
  --iv-control-bg: rgba(12, 24, 40, 0.86);
  --iv-focus: rgba(147, 197, 253, 0.95);
  --iv-focus-ring: rgba(147, 197, 253, 0.95);
  --iv-toolbar-label: #a5b0c1;
  --iv-toolbar-border: rgba(126, 153, 196, 0.2);
  --iv-chart-axis: #a5b0c1;
  --iv-chart-grid: rgba(126, 153, 196, 0.18);
  --iv-chart-label: #cbd5e1;
  --iv-table-divider: #65758a;
  --iv-control-outline: #65758a;
  --iv-shadow-theme: 0 12px 30px rgba(0, 0, 0, 0.34);
  --iv-positive: #8ec9a3;
  --iv-negative: #d17979;
  --iv-neutral: #d5b37c;
  --iv-accent-primary: #d5b37c;
  --iv-accent-secondary: #6997cd;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --bg-2: #e4eaf2;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-2: rgba(248, 251, 255, 0.96);
  --panel-soft: rgba(241, 245, 250, 0.82);
  --border: rgba(87, 104, 126, 0.24);
  --border-strong: rgba(67, 83, 105, 0.38);
  --text: #17202c;
  --text-soft: #415166;
  --text-muted: #66758a;
  --accent: #7d6232;
  --accent-soft: rgba(125, 98, 50, 0.14);
  --good: #28724d;
  --bad: #9f373f;
  --shadow: 0 10px 26px rgba(30, 42, 58, 0.14);
  --iv-page-bg: linear-gradient(180deg, #f4f7fb 0%, #e9eef5 100%);
  --iv-bg-secondary: #e6edf5;
  --iv-panel-bg: rgba(255, 255, 255, 0.9);
  --iv-panel-bg-strong: rgba(250, 252, 255, 0.98);
  --iv-panel-bg-soft: rgba(240, 245, 250, 0.86);
  --iv-border: rgba(87, 104, 126, 0.24);
  --iv-border-strong: rgba(67, 83, 105, 0.38);
  --iv-text-primary: #17202c;
  --iv-text-secondary: #415166;
  --iv-text-muted: #66758a;
  --iv-text-muted-theme: #66758a;
  --iv-surface: rgba(255, 255, 255, 0.9);
  --iv-surface-raised: rgba(250, 252, 255, 0.98);
  --iv-input-bg: #ffffff;
  --iv-input-border: rgba(87, 104, 126, 0.32);
  --iv-button-bg: rgba(239, 244, 250, 0.96);
  --iv-button-hover: rgba(226, 235, 245, 0.98);
  --iv-control-bg: rgba(239, 244, 250, 0.96);
  --iv-focus: rgba(34, 96, 170, 0.95);
  --iv-focus-ring: rgba(34, 96, 170, 0.95);
  --iv-toolbar-label: #415166;
  --iv-toolbar-border: rgba(87, 104, 126, 0.32);
  --iv-chart-axis: #415166;
  --iv-chart-grid: rgba(87, 104, 126, 0.2);
  --iv-chart-label: #415166;
  --iv-table-divider: #65758a;
  --iv-control-outline: rgba(87, 104, 126, 0.32);
  --iv-shadow-theme: 0 10px 26px rgba(30, 42, 58, 0.14);
  --iv-positive: #28724d;
  --iv-negative: #9f373f;
  --iv-neutral: #7d6232;
  --iv-accent-primary: #7d6232;
  --iv-accent-secondary: #315f94;
}

[data-accessibility="vi"] {
  --iv-text-xs: 0.78rem;
  --iv-text-sm: 0.9rem;
  --iv-text-md: 1rem;
  --iv-text-lg: 1.18rem;
  --iv-touch-min: 48px;
  --iv-focus: #ffd166;
  --iv-focus-ring: var(--iv-focus);
}

html[data-theme="dark"][data-accessibility="vi"] {
  --iv-text-primary: #f7fbff;
  --iv-text-secondary: #d5deeb;
  --iv-text-muted: #c0cad8;
  --iv-border: #7f8ea3;
  --iv-border-strong: #aab7c8;
  --iv-focus: #ffd166;
  --iv-focus-ring: var(--iv-focus);
  --iv-surface: rgba(7, 15, 27, 0.96);
  --iv-surface-raised: rgba(11, 23, 39, 0.99);
  --iv-toolbar-label: #e0e8f4;
  --iv-toolbar-border: #97a6ba;
  --iv-chart-axis: #e4ebf5;
  --iv-chart-grid: rgba(213, 222, 235, 0.34);
  --iv-chart-label: #f0f5fb;
  --iv-table-divider: rgba(213, 222, 235, 0.42);
  --iv-control-outline: #aab7c8;
  --iv-input-border: var(--iv-control-outline);
}

html[data-theme="light"][data-accessibility="vi"] {
  --iv-text-primary: #07111d;
  --iv-text-secondary: #253449;
  --iv-text-muted: #3c4e66;
  --iv-border: #65758a;
  --iv-border-strong: #536176;
  --iv-focus: #7a4c00;
  --iv-focus-ring: var(--iv-focus);
  --iv-surface: rgba(255, 255, 255, 0.98);
  --iv-surface-raised: #ffffff;
  --iv-toolbar-label: #1f2d40;
  --iv-toolbar-border: #65758a;
  --iv-chart-axis: #223149;
  --iv-chart-grid: rgba(67, 83, 105, 0.34);
  --iv-chart-label: #17202c;
  --iv-table-divider: #65758a;
  --iv-control-outline: #536176;
  --iv-input-border: var(--iv-control-outline);
}

html,
body {
  background: var(--iv-page-bg) !important;
  color: var(--iv-text-primary);
}

.topbar,
.mobile-appbar,
.mobile-module-drawer:not([hidden]),
.sidebar-panel,
.content-panel,
.fx-panel,
.panel,
.ism-apf-chamber,
.ism-position-trail-shell,
.oracle-labs-modal-panel {
  background:
    linear-gradient(180deg, var(--iv-surface-raised), var(--iv-surface)) !important;
  border-color: var(--iv-border) !important;
  color: var(--iv-text-primary) !important;
  box-shadow: var(--iv-shadow-theme) !important;
}

.fx-toolbar label,
.view-preferences-label,
.toolbar-label {
  color: var(--iv-toolbar-label) !important;
}

.fx-toolbar,
.chart-shell,
.fx-chart,
.table-shell,
table {
  border-color: var(--iv-border) !important;
}

html[data-accessibility="vi"] .content-panel,
html[data-accessibility="vi"] .fx-panel,
html[data-accessibility="vi"] .sidebar-panel,
html[data-accessibility="vi"] .topbar,
html[data-accessibility="vi"] .ism-apf-chamber,
html[data-accessibility="vi"] .ism-position-trail-shell,
html[data-accessibility="vi"] .chart-shell,
html[data-accessibility="vi"] .table-shell {
  border-color: var(--iv-border) !important;
}

th,
td {
  border-color: var(--iv-table-divider) !important;
}

svg text,
.fx-axis-label,
.chart-label,
.panel-placeholder,
.finstate-lens-placeholder {
  fill: var(--iv-chart-label) !important;
  color: var(--iv-chart-label) !important;
}

.fx-grid-line,
.chart-grid-line {
  stroke: var(--iv-chart-grid) !important;
}

:focus-visible {
  outline-color: var(--iv-focus) !important;
}

.panel-title,
.panel-kicker,
.panel-subtitle,
.panel-source,
.panel-footnote,
.chart-stat-label,
.nav-meta,
.ism-apf-temporal-title,
.ism-apf-drivers-title,
.ism-apf-component-title,
.ism-apf-geoscen-title,
.ism-apf-oracle-title,
.ism-position-trail-subtitle,
.ism-position-meta,
.central-bank-language-context-label {
  color: var(--iv-text-secondary) !important;
}

.nav-item,
.nav-parent,
.top-nav-item,
.mobile-drawer-item,
.mobile-menu-button,
.mobile-drawer-close,
.fx-control-group select,
select,
button {
  border-color: var(--iv-input-border);
}

.nav-item,
.nav-parent,
.top-nav-item,
.mobile-drawer-item,
.mobile-menu-button,
.mobile-drawer-close,
.view-settings-button,
.view-preferences-panel button {
  background: var(--iv-button-bg);
  color: var(--iv-text-primary);
}

.nav-item:hover:not(:disabled),
.nav-parent:hover:not(:disabled),
.top-nav-item:hover:not(:disabled),
.mobile-drawer-item:hover:not(:disabled),
.view-settings-button:hover,
.view-preferences-panel button:hover {
  background: var(--iv-button-hover);
}

select,
input,
textarea {
  background: var(--iv-input-bg) !important;
  border-color: var(--iv-input-border) !important;
  color: var(--iv-text-primary) !important;
}

[data-theme="light"] .brand,
[data-theme="light"] .mobile-appbar-brand,
[data-theme="light"] .formula-main,
[data-theme="light"] .chart-stat-value,
[data-theme="light"] strong {
  color: var(--iv-text-primary);
}

[data-theme="light"] .panel-placeholder,
[data-theme="light"] .empty-state,
[data-theme="light"] .ism-apf-driver-card,
[data-theme="light"] .ism-apf-exec-card,
[data-theme="light"] .ism-apf-component-row,
[data-theme="light"] .ism-apf-geoscen-item,
[data-theme="light"] .ism-apf-oracle-confidence,
[data-theme="light"] .ism-apf-oracle-counts,
[data-theme="light"] .ism-apf-oracle-dates,
[data-theme="light"] .ism-apf-focus-traceability,
[data-theme="light"] .ism-position-detail-card {
  background: var(--iv-panel-bg-soft) !important;
  border-color: var(--iv-border) !important;
  color: var(--iv-text-primary) !important;
}

[data-theme="light"] svg text,
[data-theme="light"] .fx-axis-label,
[data-theme="light"] .chart-label {
  fill: var(--iv-text-secondary) !important;
}

[data-theme="light"] .js-plotly-plot .hoverlayer text {
  fill: #111827 !important;
}

[data-theme="dark"] body:has(#cflow-subsystem option[value="energy"]:checked) #view-cflow .js-plotly-plot .hoverlayer text {
  fill: #111827 !important;
}