/* Satin silver paint, graphite glass and restrained blue brake details.
   Shared visual layer; product colour swatches and photographs keep their colours. */
@media screen {
  :root {
    --bg: #202323;
    --bg2: #292d2d;
    --panel: #333838;
    --panel2: #3e4444;
    --line: #515957;
    --line2: #89928f;
    --txt: #f3f2ee;
    --text: #f3f2ee;
    --muted: #c9cbc5;
    --muted2: #b4b8b1;
    --accent: #d8d9d4;
    --accent2: #f4f3ed;
    --accent-rgb: 216, 217, 212;
    --on-accent: #1a1e1e;
    --cyan: #b5c3c8;
    --bmw-focus: #94abb9;
    --bmw-photo-surface: #e1e2db;
    --bmw-field: #272c2c;
    --bmw-metal: linear-gradient(125deg, #eeefe8 0%, #d0d2c9 48%, #b4b8af 100%);
  }

  body { background-color: var(--bg); background-image: none; color: var(--txt); }
  .nav, .ready-nav, .shop-nav, .legal-header {
    background: rgba(32, 35, 35, .96);
    border-color: var(--line);
  }
  .nav__links, .ready-nav nav, .ready-brand > span, .logo small,
  .hero-caption small, .edition, .brand-strip .wrap { color: var(--muted); }
  .nav__links a:hover, .ready-nav a:hover, .shop-nav a:hover { color: var(--accent2); }
  .brand-monogram { border-color: var(--line); }
  .footer, .brand-strip, .brand-ribbon { background: var(--bg2); border-color: var(--line); }
  .section--alt { background: var(--bg2); }

  .btn--primary, .nav__links .btn--primary,
  .real-wheel-enquiry, .own-car-studio .ocs-button--primary {
    background: var(--bmw-metal);
    color: var(--on-accent);
    border-color: var(--accent);
    box-shadow: 0 6px 24px rgba(216, 217, 212, .09);
  }
  .btn--primary:hover, .nav__links .btn--primary:hover,
  .real-wheel-enquiry:hover, .own-car-studio .ocs-button--primary:hover {
    background: linear-gradient(125deg, #fafbf5, #d7dad0);
    color: var(--on-accent);
    border-color: var(--accent2);
    box-shadow: 0 8px 28px rgba(216, 217, 212, .15);
  }
  .btn--ghost, .btn--cyan, .text-link { border-color: var(--line2); }
  button:focus-visible, a:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible,
  .ready-page :focus-visible, .stock-shop-page :focus-visible,
  .own-car-studio :focus-visible { outline-color: var(--bmw-focus); }
  input::placeholder, textarea::placeholder { color: var(--muted2); }
  input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent); }

  .studio-hero, .hero-carousel, .hero-carousel .hero-copy { background: var(--bg); }
  .hero-carousel .hero-visual { background: #1a1e1e; border-color: var(--line); }
  .hero-carousel .hero-visual .hero-slide__shade { background: linear-gradient(0deg, rgba(32,35,35,.25), transparent 28%); }
  .hero-carousel .hero-copy h1, .hero-carousel .hero-copy h2 { color: var(--txt); }
  .hero-carousel .hero-copy h1 span, .hero-carousel .hero-copy h2 span,
  .hero-carousel .hero-eyebrow, .hero-carousel .hero-explore { color: var(--accent); }
  .hero-carousel .hero-copy p, .hero-carousel .hero-copy .hero-assurance,
  .hero-carousel .hero-product-tag, .hero-carousel .oarts-signature,
  .hero-carousel .hero-copy .oarts-signature > span:last-child,
  .hero-carousel .hero-product-tag small, .hero-carousel .hero-product-tag i,
  .hero-carousel .hero-scroll small, .hero-carousel .hero-controls,
  .hero-caption, .lead { color: var(--muted); }
  .hero-carousel .hero-product-tag b, .hero-carousel .hero-scroll { color: var(--txt); }
  .hero-carousel .oarts-signature { border-color: var(--line); }
  .hero-carousel .hero-product-tag { background: var(--bg2); border-color: var(--line); }
  .hero-carousel .hero-controls, .hero-carousel .hero-copy .oarts-signature > span:last-child { border-color: var(--line); }
  .round-control, .hero-carousel .round-control, .chapter-link { background: var(--panel); border-color: var(--line2); color: var(--txt); }
  .round-control:hover, .hero-carousel .round-control:hover, .chapter-link:hover { background: var(--panel2); border-color: var(--accent); }
  .discovery-dock { background: rgba(32,35,35,.96); border-color: var(--line); }

  .featured-wheel, .featured-wheel__detail, .design-card, .design-carousel > .design-card,
  .generation-card, .step, .tl__body, .invitation-card, .contact__info, .contact .form,
  .catalog-card, .catalog-filters, .catalog-empty, .stock-card,
  .editorial-card, .editorial-intro__note, .pricing-panel {
    background: var(--panel); border-color: var(--line);
  }
  .design-card:hover, .design-carousel > .design-card:hover,
  .catalog-card:hover, .generation-card:hover { background: var(--panel2); border-color: var(--line2); }
  .step--wide, .catalog-variants[open] > summary, .catalog-variant-list,
  .catalog-more-variants, .catalog-pagination button { background: var(--bg2); border-color: var(--line); }
  .catalog-result-bar p, .catalog-filters label, .pricing-intro,
  .pricing-panel > p, .pricing-notes p { color: var(--muted); }
  .design-card .series, .generation-card > div > span,
  .catalog-variant-source, .catalog-card-meta { color: var(--muted2); }
  .generation-card > div, .stock-card__footer { border-color: var(--line); }
  .featured-wheel__visual, .featured-wheel--silver .featured-wheel__visual,
  .stage-vehicle-frame, .catalog-vehicle-photo__frame { background: var(--bmw-photo-surface); }

  .nfw-brand-dialog { background: var(--bg2); border-color: var(--line2); }
  .nfw-brand-choice, .nfw-brand-trigger { background: var(--panel); border-color: var(--line2); }
  .nfw-brand-choice[aria-pressed=true], .nfw-brand-close:hover, .nfw-brand-clear {
    background: var(--panel2); border-color: var(--accent); color: var(--accent2);
  }
  .nfw-brand-search-wrap { background: var(--bmw-field); border-color: var(--line2); }

  .cfg-stage { background: var(--bg2); }
  .cfg-steps, body.configurator-page #stepsRail { background: var(--bg); border-color: var(--line); }
  .cfg-panel { background: var(--panel); }
  .panel-foot, body.configurator-page #panelFoot { background: var(--panel2); border-color: var(--line2); }
  .generation-info, .note, .opt-grid .opt, .opt-list .opt, .check,
  body.configurator-page .flow-details, body.configurator-page .flow-summary-edit {
    background: var(--bg2); border-color: var(--line); color: var(--txt);
  }
  .opt.active, .opt[aria-pressed=true], .check:has(input:checked),
  body.configurator-page .flow-summary-edit:hover { background: var(--panel2); border-color: var(--accent); }
  .generation-info span, .panel-body h4, .preview-caption > span { color: var(--muted); }
  body.configurator-page .stage-controls .seg { background: var(--bg); border-color: var(--line); }
  body.configurator-page .stage-controls .seg button.active {
    background: var(--bmw-metal); color: var(--on-accent);
  }
  body.configurator-page .mobile-flow-intro, body.configurator-page .flow-summary-overview {
    background-color: var(--bg2); border-color: var(--line);
  }
  .field select, .field input:not([type=color]), .field textarea,
  .catalog-filters input, .catalog-filters select,
  .commerce-panel input:not([type=checkbox]):not([type=radio]):not([type=color]),
  .commerce-panel select, .commerce-panel textarea,
  .ready-filters input, .ready-filters select, .ready-load-field select,
  .shop-filters input, .shop-filters select,
  .legal-form input:not([type=checkbox]):not([type=radio]), .legal-form select, .legal-form textarea {
    background: var(--bmw-field); border-color: var(--line2); color: var(--txt);
  }
  .wheel-photo-compare, .wheel-photo-retry, .vehicle-photo-gallery__arrow,
  .vehicle-photo-gallery__action { background: var(--panel); border-color: var(--line2); color: var(--accent); }
  .wheel-photo-compare:hover, .wheel-photo-retry:hover { background: var(--panel2); }
  .wheel-photo-compare[aria-pressed=true] { background: var(--bmw-metal); color: var(--on-accent); }

  .own-car-entry { background: linear-gradient(135deg, #3e4444, #292d2d); border-color: var(--line2); }
  .own-car-entry > b { color: var(--txt); }
  .own-car-entry > p { color: var(--muted); }
  .own-car-studio {
    --ocs-line: rgba(216,217,212,.3);
    --ocs-muted: var(--muted);
    --ocs-ink: var(--txt);
    background: linear-gradient(150deg, #333838, #202323 75%);
    border-color: var(--line);
  }
  .own-car-studio button, .own-car-studio .ocs-button { background: var(--panel); }
  .own-car-studio button:hover, .own-car-studio .ocs-button:hover { background: var(--panel2); border-color: var(--accent); }
  .own-car-studio .ocs-button--primary { background: var(--bmw-metal); color: var(--on-accent); }
  .own-car-studio .ocs-steps button[aria-current=step],
  .own-car-studio .ocs-thumbnails button[aria-pressed=true],
  .own-car-studio .ocs-wheel-picker button[aria-pressed=true] { background: var(--panel2); border-color: var(--accent); }
  .own-car-studio .ocs-upload { background: var(--bg2); border-color: var(--line2); }
  .own-car-studio .ocs-status { color: var(--accent); }

  .ready-filters, .ready-product, .ready-loading, .ready-empty,
  .shop-filters, .shop-product, .shop-cart, .shop-loading, .shop-empty,
  .shop-dialog, .shop-detail-gallery, .commerce-panel, .commerce-product,
  .legal-form, .legal-highlights > div { background: var(--panel); border-color: var(--line); }
  .ready-photo-count, .shop-dialog-close { background: var(--bg2); border-color: var(--line2); color: var(--txt); }
  .ready-data-status, .shop-notice, .ready-electric, .commerce-electric,
  .ready-enquiry .commerce-panel, .pricing-notes { background: var(--bg2); border-color: var(--line2); }
  .ready-product-photo:not([data-manufacturer=true]),
  .shop-product-photo:not([data-manufacturer=true]),
  .shop-detail-photo:not([data-manufacturer=true]) { background: var(--bmw-photo-surface); }
  .ready-hero h1 span { color: var(--accent); }
  .ready-hero-copy, .ready-back, .ready-nav nav, .ready-electric-help,
  .commerce-small, .commerce-company, .commerce-specs dt,
  .commerce-electric-help, .pricing-table th, .shop-small { color: var(--muted); }
  .ready-electric-label, .commerce-electric-label, .ready-load-field,
  .commerce-electric .commerce-load-label, .ready-electric-load,
  .commerce-electric-load, .pricing-table td:last-child { color: var(--txt); }
  .commerce-status:not([data-state=error]):not([data-state=success]) {
    background: var(--bg2); border-color: var(--line2); color: var(--txt);
  }
  .commerce-product button[aria-pressed=true] { outline-color: var(--accent); }
  .contents a:hover, .print, .legal-form button {
    background: var(--panel2); border-color: var(--line2); color: var(--txt);
  }
  .legal-header .phone { color: var(--txt); }
  .legal-form .form-note, .intro .lead, .contact-grid p { color: var(--muted); }
}