/* Duotone icons (Phosphor Icons, duotone weight; see assets/icons/SOURCES.md), website and admin.
   Every icon is a 256x256 SVG: the outline is filled with the text colour (currentColor) and the
   background shape (.ph-duo) takes a second tone that follows the surface the icon sits on:
     - light ivory surfaces: the brand gold, softened;
     - dark surfaces (header, hero, search band, footer, photo buttons): the brand gold, stronger;
     - gold surfaces (gold buttons, the long-stay note, gold circles): ivory, so the two tones stay apart.
   Surfaces only set --icon-duo / --icon-duo-opacity; the nearest one wins. Both colours follow
   the site's colour settings (--button-gold, --ivory). */
.ph-duo { fill: var(--icon-duo, var(--button-gold, #cba45e)); opacity: var(--icon-duo-opacity, .45); }
/* Plus, minus, ×, check, upload/download and "clear formatting" have only a plain square as their second
   tone (class ph-plate, set by the generator). It stays faint, near Phosphor's own 20%, so the glyph leads:
   at full strength a + reads as a window, the divider as a highlight and a × as a ticked box. */
.ph-duo.ph-plate { opacity: calc(var(--icon-duo-opacity, .45) * .45); }

/* Room features sit in gold-tint circles: a stronger second tone keeps it apart from the circle. */
.room-feature-icon { --icon-duo-opacity: .62; }

/* Dark surfaces. */
.hero, .site-header, .stay-search-bar, .site-footer, .room-photos-link, .template-lightbox {
  --icon-duo: var(--button-gold, #cba45e); --icon-duo-opacity: .72;
}
/* The date fields' calendar is drawn in gold on the dark band: ivory keeps the second tone distinct. */
.stay-search-bar .stay-field-icon { --icon-duo: var(--ivory, #f8f4ec); --icon-duo-opacity: .3; }

/* Gold surfaces. */
.button, .nav-menu-all, .concierge-icon, .arrow-button, .back-to-top, .template-lightbox .dialog-close,
.article-photo-control, .long-stay-offer, .rooms .room-option.is-selected + .room-detail-link,
.calendar-month-heading button:hover:not(:disabled), .stay-calendar-nav:hover:not(:disabled) {
  --icon-duo: var(--ivory, #f8f4ec); --icon-duo-opacity: .66;
}
/* The outlined hero button is transparent over the photograph, not gold. */
.button-outline-light { --icon-duo: var(--button-gold, #cba45e); --icon-duo-opacity: .72; }

/* The long-stay seal (SealPercent): dark outline and percent on an ivory seal, inside the gold note. */
.long-stay-offer .offer-badge { color: #2a2017; --icon-duo-opacity: .8; }

/* Round controls (guest stepper, photo +, the admin's selected-photo check): the circle itself is the
   second tone, because the glyph's square plate would sit inside the circle. */
.stay-stepper .ph-duo, .article-photo-control .ph-duo, .photo-zoom .ph-duo, .media-selection-mark .ph-duo { display: none; }
.stay-stepper button { background-color: color-mix(in srgb, var(--button-gold, #cba45e) 22%, transparent); }

/* Admin (assets/icons/admin-icons.js). */
.admin-button.primary { --icon-duo: #fffaf2; --icon-duo-opacity: .62; }
.admin-button.danger, .icon-button.danger { --icon-duo: currentColor; --icon-duo-opacity: .16; }