/* FuelDash R195 — one neutral OLED surface system. */
:root {
  --fd-r195-page: #000000;
  --fd-r195-card: #0c0c0c;
  --fd-r195-control: #080808;
  --fd-r195-border: #1e1e1e;
  --fd-r195-text: #f5f5f7;
  --fd-r195-muted: #a1a1a8;

  /* Legacy tokens are redirected so late component rules inherit this palette too. */
  --fd-page: var(--fd-r195-page);
  --fd-surface: var(--fd-r195-card);
  --fd-surface-raised: var(--fd-r195-control);
  --fd-field: var(--fd-r195-control);
  --fd-border: var(--fd-r195-border);
  --fd-border-strong: var(--fd-r195-border);
  --fd-text: var(--fd-r195-text);
  --fd-muted: var(--fd-r195-muted);
  --fd-r190-surface: var(--fd-r195-card);
  --fd-r190-surface-raised: var(--fd-r195-control);
  --fd-r190-border: var(--fd-r195-border);
  --fd-r190-nav-bg: var(--fd-r195-control);
  --fd-r190-nav-border: var(--fd-r195-border);
  --fd-r190-control-bg: var(--fd-r195-control);
  --fd-r190-control-border: var(--fd-r195-border);
  --fd-r190-shared-control-bg: var(--fd-r195-control);
  --fd-r190-shared-control-border: var(--fd-r195-border);
  --fd-r192-control-bg: var(--fd-r195-control);
  --fd-r192-control-border: var(--fd-r195-border);
  --fd-r193-control-bg: var(--fd-r195-control);
  --fd-r193-control-border: var(--fd-r195-border);
}

html,
body,
#app,
#app .app-shell,
#app .app-content,
#app .detail-view,
.fd-startup-cover,
.fd-fast-shell,
.fd-feature-page,
.fd-alert-modal,
.fd-account-sheet {
  background: var(--fd-r195-page) !important;
  color: var(--fd-r195-text) !important;
}

/* Content remains legible against the page without introducing a blue or violet cast. */
html body :is(#app, .fd-feature-page, .fd-alert-modal, .fd-account-sheet) :is(
  .glass-card,
  .price-hero,
  .dashboard-section,
  .chart-block,
  .favorites-block,
  .fuel-preference,
  .nearby-radius,
  .menu-card,
  .station-card,
  .station-result,
  .dashboard-favorite-card,
  .favorites-screen-card,
  .primary-station-card,
  .detail-card,
  .detail-prices,
  .detail-chart,
  .search-suggestion-panel,
  .fd-best,
  .fd-feature-card,
  .fd-account-card,
  .fd-account-page-status,
  .fd-tank-history,
  .fd-account-sheet__panel
) {
  border-color: var(--fd-r195-border) !important;
  background: var(--fd-r195-card) !important;
  box-shadow: none !important;
}

/* Every compact interactive surface uses the exact same approved black. */
html body :is(#app, .fd-feature-page, .fd-alert-modal, .fd-account-sheet, .fd-startup-cover) :is(
  .fuel-tab-bar,
  .station-sort,
  .chart-range,
  .search-field,
  .round-button,
  .fd-profile-button,
  .fd-app-reload,
  .refresh-pill,
  .map-location-control,
  .map-location-button,
  .route-trigger,
  .route-options > a,
  .fd-live-location-button,
  .fd-feature-back,
  .fd-auth-secondary,
  .fd-backup-actions > button,
  .fd-account-card__action,
  .fd-alert-close,
  .fd-alert-test,
  .detail-price-card:not(.is-selected),
  .tab-stepper__controls,
  .fd-fast-nav,
  .fd-fast-profile-placeholder
) {
  border-color: var(--fd-r195-border) !important;
  background: var(--fd-r195-control) !important;
  box-shadow: none !important;
}

/* Search, account, tankbook and alert editors are one shared input material. */
html body :is(#app, .fd-feature-page, .fd-alert-modal, .fd-account-sheet) :is(
  .search-field,
  .fd-field > :is(input, select, textarea),
  .fd-auth-form input,
  .fd-account-card__password input,
  .fd-alert-row :is(select, input[type="time"], input[type="number"]),
  .fd-backup-input
) {
  border-color: var(--fd-r195-border) !important;
  background: var(--fd-r195-control) !important;
  box-shadow: none !important;
}

html body #app .search-field > input {
  background: transparent !important;
  box-shadow: none !important;
}

/* Price alert and feature rows are content cards; their controls above remain #080808. */
html body .fd-alert-modal :is(
  .fd-alert-status,
  .fd-alert-row,
  .fd-alert-station,
  .fd-alert-empty
),
html body .fd-feature-page :is(
  .fd-feature-card,
  .fd-tank-summary > article,
  .fd-month-grid > article,
  .fd-tank-entry,
  .fd-account-card,
  .fd-account-page-status
) {
  border-color: var(--fd-r195-border) !important;
  background: var(--fd-r195-card) !important;
  box-shadow: none !important;
}

/* Small neutral cells inside cards follow the common control surface. */
html body .fd-feature-page :is(
  .fd-tank-entry__values > span,
  .fd-feature-card__head > span,
  .fd-tank-history__head > span,
  .fd-auth-switch
),
html body .fd-alert-modal :is(.fd-alert-row :is(select, input), .fd-alert-station-count) {
  border-color: var(--fd-r195-border) !important;
  background: var(--fd-r195-control) !important;
  box-shadow: none !important;
}

/* Preserve the live map pixels; only the surrounding controls and cards are recoloured. */
html body #app :is(.fuel-map, .fuel-map-canvas, .leaflet-container) {
  border-color: var(--fd-r195-border) !important;
}

html body .fd-theme-preview__card {
  border-color: var(--fd-r195-border) !important;
  background: var(--fd-r195-card) !important;
  box-shadow: none !important;
}

html body .fd-theme-preview__nav,
html body .fd-fast-kicker,
html body .fd-fast-title,
html body .fd-fast-line {
  background: var(--fd-r195-control) !important;
  box-shadow: none !important;
}