/*
 * Richie Gold & Diamonds — navy-and-gold brand theme, 2026-09-20.
 *
 * Owner direction: replace the legacy near-black foundation with the Richie
 * shield's navy family and retain gold as the premium accent. This is an
 * additive immutable override: it intentionally does not change catalogue
 * data, product media, checkout eligibility, Stripe mapping, cart logic,
 * watch inquiry isolation, delivery policy, or partner-publication controls.
 */
:root {
  --richie-navy-950: #081426;
  --richie-navy-900: #0D1F39;
  --richie-navy-850: #122A4B;
  --richie-navy-800: #18365E;
  --richie-gold: #D4AF37;
  --richie-gold-light: #F2D27C;
  --richie-ink: #F7F3E9;
  --richie-ink-dim: #C8D4E7;

  /* Maintain compatibility with the established static renderer. */
  --bg: var(--richie-navy-950);
  --bg-2: var(--richie-navy-900);
  --bg-3: var(--richie-navy-850);
  --panel: rgba(24, 54, 94, 0.64);
  --panel-2: rgba(32, 68, 110, 0.72);
  --line: rgba(212, 175, 55, 0.28);
  --line-soft: rgba(200, 212, 231, 0.16);
  --gold: var(--richie-gold);
  --gold-2: var(--richie-gold-light);
  --gold-3: #9A7B1E;
  --ink: var(--richie-ink);
  --ink-dim: var(--richie-ink-dim);
  --ink-mute: rgba(200, 212, 231, 0.76);
  --shadow: 0 30px 80px rgba(2, 10, 24, 0.48);
}

html { background: var(--richie-navy-950); }
body {
  background: var(--richie-navy-950);
  color: var(--richie-ink);
}
body::before {
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.035) 1px, transparent 1px);
}
body::after {
  background:
    radial-gradient(ellipse 105% 92% at 50% 112%, rgba(6, 19, 39, 0.96), transparent 62%),
    linear-gradient(180deg, transparent 30%, rgba(8, 20, 38, 0.42) 100%);
}
::selection { background: rgba(212, 175, 55, 0.38); color: var(--richie-navy-950); }

/* Navigation, ticker and mobile app shell. */
.topbar.scrolled { background: rgba(8, 20, 38, 0.86); }
.ticker {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.11), rgba(24, 54, 94, 0.32), rgba(212, 175, 55, 0.11));
}
.cart-pill,
.cur-toggle,
.cur-toggle button { background-color: rgba(24, 54, 94, 0.56); }
.tabbar {
  background: rgba(8, 20, 38, 0.94);
  box-shadow: 0 -10px 34px rgba(2, 10, 24, 0.22);
}
.tabbar a:active { background: rgba(212, 175, 55, 0.12); }

/* Keep media visible while replacing their legacy charcoal reading layers. */
.hero.has-hero-video,
.hero-motion { background: var(--richie-navy-950); }
.hero-motion::after {
  background:
    linear-gradient(180deg, rgba(8, 20, 38, 0.74) 0%, rgba(8, 20, 38, 0.14) 35%, rgba(8, 20, 38, 0.28) 58%, rgba(8, 20, 38, 0.94) 100%),
    linear-gradient(90deg, rgba(8, 20, 38, 0.84) 0%, rgba(8, 20, 38, 0.34) 50%, rgba(8, 20, 38, 0.12) 78%, rgba(8, 20, 38, 0.5) 100%);
}
.hero-motion-toggle {
  background: rgba(13, 31, 57, 0.88);
  box-shadow: 0 8px 22px rgba(2, 10, 24, 0.38);
}
.hero-motion-toggle:hover { background: rgba(24, 54, 94, 0.96); }
.hero-frame.look::after,
.hero-slides::after,
.hero-diamond .hero-slides::after {
  background:
    linear-gradient(180deg, rgba(8, 20, 38, 0.68) 0%, rgba(8, 20, 38, 0.18) 37%, rgba(8, 20, 38, 0.86) 100%),
    linear-gradient(90deg, rgba(8, 20, 38, 0.58), transparent 64%);
}

/* Shared cards, catalogue and product visual surfaces. */
.card,
.card:not(.card--watch),
.collection-card,
.filter-panel,
.lead-form,
.wa-list li,
.atelier-card,
.owner-gallery-control,
.richie-toast {
  background-color: var(--richie-navy-900);
}
.card-img-transparent,
.pdp-media-transparent,
.co-thumb-transparent,
.pdp-side {
  background:
    radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.17), transparent 60%),
    radial-gradient(circle at 50% 116%, rgba(63, 116, 183, 0.18), transparent 55%),
    linear-gradient(180deg, var(--richie-navy-850), var(--richie-navy-950));
}
.card-img-transparent img,
.pdp-media-transparent img { filter: drop-shadow(0 18px 30px rgba(2, 10, 24, 0.42)) drop-shadow(0 0 26px rgba(212, 175, 55, 0.16)); }
.gold,
.contact,
.watch-atelier,
.boutique {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(212, 175, 55, 0.13), transparent 60%),
    linear-gradient(180deg, rgba(24, 54, 94, 0.46), rgba(8, 20, 38, 0.1) 54%, rgba(13, 31, 57, 0.46));
}
.lead-form input,
.lead-form select,
.lead-form textarea,
.weight-select,
.pdp-qty input,
.chat-form input,
.chat-icon-btn,
.owner-gallery-control {
  background-color: rgba(8, 20, 38, 0.78);
}
.weight-select option { background: var(--richie-navy-900); color: var(--richie-ink); }

/* Quick-view, product details and checkout. */
.quick-view-backdrop { background: rgba(3, 10, 22, 0.84); }
.quick-view-dialog {
  background: linear-gradient(145deg, var(--richie-navy-850), var(--richie-navy-950));
  box-shadow: 0 30px 100px rgba(2, 10, 24, 0.64);
}
.quick-view-close,
.quick-view-media,
.pdp-media,
.pdp-media img {
  background-color: var(--richie-navy-900);
}
.quick-view-media { background-image: radial-gradient(circle at 50% 35%, rgba(92, 137, 205, 0.24), transparent 52%); }
.pdp-media {
  box-shadow: 0 40px 90px rgba(2, 10, 24, 0.42);
  border-color: rgba(212, 175, 55, 0.38);
}
.pdp-origin,
.origin-choice,
.co-summary,
.co-line,
.checkout-layout,
.co-grid,
.cart-drawer {
  background-color: rgba(18, 42, 75, 0.62);
}
.origin-choice { border-color: rgba(200, 212, 231, 0.22); }
.origin-choice:hover,
.origin-choice.active { background-color: rgba(212, 175, 55, 0.14); }
.pdp-actionbar {
  background: rgba(8, 20, 38, 0.98);
  box-shadow: 0 -12px 34px rgba(2, 10, 24, 0.24);
}

/* Footer, payment information, concierge and browser-local notices. */
.foot {
  background: linear-gradient(180deg, var(--richie-navy-950), var(--richie-navy-900));
  border-top-color: rgba(200, 212, 231, 0.18);
}
.payment-trust-footer {
  background: linear-gradient(110deg, rgba(212, 175, 55, 0.14), rgba(18, 42, 75, 0.9) 48%, rgba(212, 175, 55, 0.08));
  box-shadow: 0 12px 34px rgba(2, 10, 24, 0.24);
}
.payment-trust-lock,
.payment-trust-token { background: rgba(8, 20, 38, 0.68); }
.trust-marks-panel {
  color: var(--richie-navy-950);
  background: #F8FAFD;
  box-shadow: 0 16px 42px rgba(2, 10, 24, 0.28);
}
.trust-mark { box-shadow: 0 4px 14px rgba(8, 20, 38, 0.1); }
.richie-agent-fab {
  color: var(--richie-ink);
  background: linear-gradient(135deg, rgba(24, 54, 94, 0.98), rgba(8, 20, 38, 0.98));
  box-shadow: 0 16px 44px rgba(2, 10, 24, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
}
.richie-agent-monogram,
.richie-agent-avatar {
  background: radial-gradient(circle at 35% 30%, var(--richie-navy-800), var(--richie-navy-950) 68%);
}
.richie-agent-panel {
  background: linear-gradient(160deg, rgba(18, 42, 75, 0.99), rgba(8, 20, 38, 0.99));
  box-shadow: 0 30px 90px rgba(2, 10, 24, 0.58);
}
.richie-agent-header { background: radial-gradient(circle at 10% 0%, rgba(212, 175, 55, 0.2), transparent 45%); }
.richie-agent-message.msg-h .msg-bubble,
.richie-agent-prompts button,
.richie-agent-footer { background-color: rgba(24, 54, 94, 0.58); }
.richie-agent-message.msg-u .msg-bubble { background: linear-gradient(135deg, #2A6982, #16465F); }
.richie-notification {
  background:
    linear-gradient(128deg, rgba(212, 175, 55, 0.16), transparent 48%),
    rgba(13, 31, 57, 0.98);
  box-shadow: 0 22px 60px rgba(2, 10, 24, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.richie-notification__dismiss { background: rgba(24, 54, 94, 0.76); }
.richie-install-app,
.mobile-install-card {
  background: linear-gradient(135deg, rgba(24, 54, 94, 0.98), rgba(8, 20, 38, 0.98));
  box-shadow: 0 18px 52px rgba(2, 10, 24, 0.48);
}

/* Digital Atelier retains its own editorial system while moving off black. */
.atelier-page {
  --atelier-black: var(--richie-navy-950);
  --atelier-carbon: var(--richie-navy-900);
  --atelier-paper: var(--richie-ink);
  --atelier-gold: var(--richie-gold);
  --atelier-gold-bright: var(--richie-gold-light);
  --atelier-line: rgba(212, 175, 55, 0.3);
  --atelier-muted: var(--richie-ink-dim);
  background: var(--richie-navy-950);
}
.atelier-grid-lines::before {
  background:
    radial-gradient(circle at 75% 50%, rgba(212, 175, 55, 0.2), transparent 24rem),
    linear-gradient(90deg, var(--richie-navy-950) 0%, transparent 70%);
}
.atelier-study-stage,
.atelier-intent-field,
.atelier-fields fieldset,
.atelier-selects,
.atelier-chat-log,
.atelier-chat-form,
.atelier-design-card,
.atelier-design-card-copy,
.atelier-rail li,
.atelier-concept-study img {
  background-color: var(--richie-navy-900);
}
.atelier-study-stage { background-image: radial-gradient(circle at 50% 40%, rgba(242, 210, 124, 0.18), transparent 20%); }
.atelier-intent-field,
.atelier-design-card { background-image: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent 55%); }
.atelier-intent-field textarea,
.atelier-selects input,
.atelier-selects select,
#atelier-chat-input { background: var(--richie-navy-950); }
.atelier-ai-chat {
  background:
    radial-gradient(circle at 96% 8%, rgba(212, 175, 55, 0.18), transparent 31rem),
    var(--richie-navy-900);
}
.rich-ai-panel-head { background: rgba(18, 42, 75, 0.96); }
.rich-ai-avatar { background: var(--richie-navy-850); }
.atelier-chat-message { background: var(--richie-navy-850); box-shadow: 0 .25rem .9rem rgba(2, 10, 24, 0.24); }
.atelier-chat-message--user { background: #1E6680; }
.atelier-composer { background: #F6F8FC; }
.atelier-icon-button { background: var(--richie-navy-850); }

/* Explicit navigation and control focus remains visible against navy. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.atelier-page :focus-visible {
  outline: 3px solid var(--richie-gold-light);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .topbar { background: rgba(8, 20, 38, 0.9); }
  .hero-motion::after {
    background:
      linear-gradient(180deg, rgba(8, 20, 38, 0.7) 0%, rgba(8, 20, 38, 0.15) 27%, rgba(8, 20, 38, 0.3) 56%, rgba(8, 20, 38, 0.96) 100%),
      linear-gradient(90deg, rgba(8, 20, 38, 0.48), transparent 45%, rgba(8, 20, 38, 0.32));
  }
  .pdp-media { background: var(--richie-navy-900); }
}
@media (max-width: 640px) {
  /* Grid items otherwise retain their intrinsic width and create a 19px
     document overflow beside the contact section on small handsets. */
  .contact-inner { grid-template-columns: minmax(0, 1fr); }
  .contact-inner > * { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-toggle,
  .richie-agent-fab,
  .richie-notification,
  .richie-install-app,
  .trust-mark { transition: none; }
}