@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --bg: #080b0e !important;
  --bg-deep: #06090b !important;
  --sidebar: #0d1216 !important;
  --panel: #10161b !important;
  --panel-hover: #151c22 !important;
  --panel-soft: #0c1115 !important;
  --surface-strong: #12191e !important;
  --surface-input: #07110d !important;
  --border: #273139 !important;
  --border-soft: #1c262c !important;
  --border-bright: #3a464f !important;
  --text: #e1e7eb !important;
  --text-primary: #f0f3f5 !important;
  --text-soft: #b7c1c8 !important;
  --muted: #89949b !important;
  --muted-2: #65717a !important;
  --blue: #5b9dff !important;
  --blue-soft: rgba(91, 157, 255, 0.12) !important;
  --amber: #facc15 !important;
  --amber-soft: rgba(250, 204, 21, 0.1) !important;
  --green: #41c98d !important;
  --green-soft: rgba(65, 201, 141, 0.1) !important;
  --red: #ff667c !important;
  --red-soft: rgba(255, 102, 124, 0.1) !important;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif !important;
  --font-mono: "IBM Plex Mono", monospace !important;

  --bg-main: var(--bg) !important;
  --bg-soft: var(--bg-deep) !important;
  --bg-panel: var(--panel) !important;
  --bg-panel-2: var(--panel-soft) !important;
  --bg-panel-3: var(--surface-strong) !important;
  --bg-input: var(--surface-input) !important;
  --border-focus: var(--blue) !important;
  --border-hover: var(--border-bright) !important;
  --border-light: var(--border-soft) !important;
  --text-secondary: var(--text-soft) !important;
  --text-muted: var(--muted) !important;
  --accent: var(--blue) !important;
  --accent-hover: #3b82f6 !important;
  --success: var(--green) !important;
  --danger: var(--red) !important;
  --warning: var(--amber) !important;
  --info: var(--blue) !important;
  --blue-2: #79aaff !important;
  --yellow: var(--amber) !important;
  --yellow-2: #facc15 !important;
  --oq-bg: var(--bg) !important;
  --oq-surface: var(--panel) !important;
  --oq-surface-2: var(--panel-soft) !important;
  --oq-surface-3: var(--surface-strong) !important;
  --oq-border: var(--border) !important;
  --oq-border-strong: var(--border-bright) !important;
  --oq-text: var(--text-primary) !important;
  --oq-text-soft: var(--text-soft) !important;
  --oq-muted: var(--muted) !important;
  --oq-muted-2: var(--muted-2) !important;
  --oq-blue: var(--blue) !important;
  --oq-blue-light: #79aaff !important;
  --oq-green: var(--green) !important;
  --oq-yellow: var(--yellow) !important;
  --oq-red: var(--red) !important;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f3 !important;
  --bg-deep: #e9edeb !important;
  --sidebar: #e7ece9 !important;
  --panel: #ffffff !important;
  --panel-hover: #f5f7f6 !important;
  --panel-soft: #f7f9f8 !important;
  --surface-strong: #edf1ef !important;
  --surface-input: #ffffff !important;
  --border: #d5ddda !important;
  --border-soft: #e2e8e5 !important;
  --border-bright: #bac7c1 !important;
  --text: #26312d !important;
  --text-primary: #17211d !important;
  --text-soft: #46534d !important;
  --muted: #65736d !important;
  --muted-2: #89948f !important;
  --blue: #2868c8 !important;
  --blue-soft: rgba(40, 104, 200, 0.1) !important;
  --amber: #806b00 !important;
  --amber-soft: rgba(128, 107, 0, 0.1) !important;
  --green: #105735 !important;
  --green-soft: rgba(16, 87, 53, 0.1) !important;
  --red: #8c2734 !important;
  --red-soft: rgba(140, 39, 52, 0.1) !important;
  --bg-gradient: linear-gradient(
    180deg,
    #f7f9f8 0%,
    #f0f3f1 55%,
    #e9edeb 100%
  ) !important;
  --accent-hover: #1e50a3 !important;
  --blue-2: #3978d4 !important;
  --yellow-2: #806b00 !important;
  --oq-blue-light: #3978d4 !important;
}

html body {
  font-family: var(--font-ui) !important;
}

html body :is(button, input, select, textarea) {
  font-family: var(--font-ui) !important;
}

html body .oq-subscription-page {
  font-family: var(--font-ui) !important;
}

html
  body
  :is(
    .card,
    [class$="-card"]:not(.profile-card):not(.session-card),
    .panel,
    [class$="-panel"]
  ) {
  color: var(--text) !important;
  background: var(--panel) !important;
  border-color: var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html[data-theme="light"] body {
  color: var(--text) !important;
  background: var(--bg-gradient) !important;
}

html
  body
  :is(.hedge-dashboard, .main-container, .ae-page, .risk-page, .de-page) {
  --ae-bg: var(--bg) !important;
  --ae-panel: var(--panel) !important;
  --ae-panel-2: var(--panel-soft) !important;
  --ae-border: var(--border) !important;
  --ae-border-2: var(--border-bright) !important;
  --ae-text: var(--text) !important;
  --ae-muted: var(--muted) !important;
  --ae-muted-2: var(--muted-2) !important;
  --ae-blue: var(--blue) !important;
  --risk-bg: var(--bg) !important;
  --risk-panel: var(--panel) !important;
  --risk-panel-2: var(--panel-soft) !important;
  --risk-border: var(--border) !important;
  --risk-border-soft: var(--border-soft) !important;
  --text-main: var(--text) !important;
  --text-soft: var(--text-soft) !important;
  --text-muted: var(--muted) !important;
  --text-dark: var(--muted-2) !important;
  --de-bg: var(--bg) !important;
  --de-panel: var(--panel) !important;
  --de-panel-2: var(--panel-soft) !important;
  --de-border: var(--border) !important;
  --de-border-2: var(--border-bright) !important;
  --de-text: var(--text) !important;
  --de-muted: var(--muted) !important;
  --de-muted-2: var(--muted-2) !important;
  --de-blue: var(--blue) !important;
  --de-orange: var(--yellow) !important;
  --de-yellow: var(--amber) !important;
  --de-purple: var(--muted) !important;
  --bg-2: var(--bg-deep) !important;
  --panel-2: var(--panel-soft) !important;
  --panel-3: var(--surface-strong) !important;
  --line: var(--border-soft) !important;
  --line-2: var(--border) !important;
  --line-blue: var(--blue-soft) !important;
  --text-2: var(--text-soft) !important;
  font-family: var(--font-ui) !important;
  color: var(--text) !important;
}

html
  body
  :is(.hedge-dashboard, .main-container, .ae-page, .risk-page, .de-page)
  :not(i):not([class*="fa-"]):not(svg):not(svg *) {
  font-family: var(--font-ui) !important;
}

html
  body
  :is(.hedge-dashboard, .main-container, .ae-page, .risk-page, .de-page)
  :not(i):not([class*="fa-"]):not(svg):not(svg *)
  :is(
    td,
    .mono,
    .score-number,
    .score-value,
    .summary-value,
    .ae-summary-value,
    .de-summary-value,
    .gauge-value,
    .metric-value,
    .de-price-value,
    .de-audit-value,
    [class$="-value"]
  ) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

html
  body
  :is(.hedge-dashboard, .main-container, .ae-page, .risk-page, .de-page)
  :is(
    [class$="-card"],
    [class$="-panel"],
    [class$="-box"],
    .premium-panel,
    .macro-section,
    .macro-card,
    .macro-subcard,
    .regime-hero,
    .regime-metric,
    .ai-summary-text,
    .ai-setup,
    .ai-scenario,
    .ai-watch-item,
    .ai-score-cell,
    .ai-market-item,
    .layer-card,
    .layer-content,
    .de-narrative-section,
    .de-inline-metrics,
    .de-risk-summary,
    .de-audit-card,
    .de-detail-summary-metric,
    .de-simulation-table-wrap,
    .news-container,
    .news-ai,
    .news-info-box,
    .economic-calendar,
    .calendar-header,
    .calendar-row,
    .timeline-card,
    .horizontal-event-card,
    .movers-card,
    .correlation-insight
  ) {
  color: var(--text) !important;
  background: var(--panel) !important;
  border-color: var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html
  body
  :is(.hedge-dashboard, .main-container, .ae-page, .risk-page, .de-page)
  :is(
    .ae-reset-btn,
    .reset-btn,
    .de-reset-btn,
    .ae-view-btn,
    .de-view-btn,
    .action-btn,
    .universe-btn.active,
    .ae-tf-btn.active,
    .tf-btn.active,
    .de-tf-btn.active
  ) {
  color: var(--text-primary) !important;
  background: #2868c8 !important;
  border-color: #3978d4 !important;
  box-shadow: none !important;
}

html[data-theme="light"]
  body
  :is(.hedge-dashboard, .main-container, .ae-page, .risk-page, .de-page)
  :is(
    [class$="-card"],
    [class$="-panel"],
    [class$="-box"],
    .premium-panel,
    .macro-section,
    .macro-card,
    .macro-subcard,
    .regime-hero,
    .regime-metric,
    .ai-summary-text,
    .ai-setup,
    .ai-scenario,
    .ai-watch-item,
    .ai-score-cell,
    .ai-market-item,
    .layer-card,
    .layer-content,
    .de-narrative-section,
    .de-inline-metrics,
    .de-risk-summary,
    .de-audit-card,
    .de-detail-summary-metric,
    .de-simulation-table-wrap,
    .news-container,
    .news-ai,
    .news-info-box,
    .economic-calendar,
    .calendar-header,
    .calendar-row,
    .timeline-card,
    .horizontal-event-card,
    .movers-card,
    .correlation-insight
  ) {
  color: var(--text) !important;
  background: var(--panel) !important;
  border-color: var(--border) !important;
}