/* Approved subtle finish, shared by the preview screens.
   Paint only: preserve typography, spacing, dimensions, layout and brand colors. */
body {
  --muted: #55596c;
  --finish-metadata: #767286;
  --finish-logo-shadow: inset 0 1px 0 #ffffffa6, inset 0 0 0 1px #34225814,
    0 2px 3px #34225806, 0 4px 9px #34225810;
  --finish-card-shadow: inset 0 1px 0 #ffffff70, 0 2px 5px #291c4808;
}
body:has(#preview-dark-mode:checked) {
  --muted: #c5bfd2;
  --finish-metadata: #bdb6cb;
  --finish-logo-shadow: inset 0 1px 0 #ffffffa6, inset 0 0 0 1px #34225814,
    0 2px 3px #00000016, 0 4px 9px #00000024;
  --finish-card-shadow: inset 0 1px 0 #ffffff07, 0 2px 5px #00000016;
}

/* More specific page styles keep their already stronger text contrast. */
:where(body) .field-hint { color: var(--finish-metadata); }
body:has(#preview-dark-mode) .rank-card .row-meta { color: var(--finish-metadata); }

body .product-logo { box-shadow: var(--finish-logo-shadow); }

/* Export artwork has its own light palette, independent of the studio theme. */
.share-art {
  --finish-logo-shadow: inset 0 1px 0 #ffffffa6, inset 0 0 0 1px #34225814,
    0 2px 3px #34225806, 0 4px 9px #34225810;
}

/* Apply the approved low shadow to flat surfaces. Existing elevated elements
   such as offer panels, pricing cards, dialogs and artwork keep their shadows. */
body .rank-card:not(:hover):not(:focus-within),
body :is(.stat-card, .panel, .campaign-card, .form-panel, .buyer-card,
  .how-step-card, .vendor-stat, .vendor-credit-panel, .share-studio,
  .mini-deal, .screen-link, .podium-card):not(:hover):not(:focus-within) {
  box-shadow: var(--finish-card-shadow);
}