/* ============================================================================
   ORO — gold palette override
   Branch: assets/oro-visuals

   ADDITIVE ONLY. Loaded after oro.css. Nothing in oro.css is edited, so this
   file cannot conflict with the section work happening on main.

   The base template drives every accent from four custom properties plus three
   hard-coded rules. Those seven places are the entire blue surface of the site
   — verified by scanning index.html, privacy.html, terms.html, oro.css and
   bg-particles.js: all accent literals live in oro.css, the HTML has none.

   Gold ramp sampled from the master ORO wordmark, not invented:
     deep    #8A6B22   shadow side of the metal
     core    #C8A24C   the brand gold (most-sampled tone)
     bright  #E7C75F   primary highlight
     light   #F5E4A8   specular tip

   Measured contrast on the #080808 ground:
     #C8A24C  8.32:1     #E7C75F  12.23:1
   Both clear AA and AAA for body copy.
   ========================================================================== */

:root,
.w-variant-base {
  --oro-gold-deep:   #8a6b22;
  --oro-gold-core:   #c8a24c;
  --oro-gold-bright: #e7c75f;
  --oro-gold-light:  #f5e4a8;

  /* The four template accent tokens. Overriding these turns the whole site
     gold without touching a single existing rule. */
  --_colors---color--blue:       var(--oro-gold-core);
  --_colors---color--sky-blue:   var(--oro-gold-bright);
  --_colors---color--turquoise:  var(--oro-gold-light);
  --_colors---color--light-blue: var(--oro-gold-light);
}

/* --- the three rules that hard-code blue instead of using a token ---------- */

/* Primary button. White-on-gold measures 2.41:1 at the light end of the ramp
   and fails AA, so the button flips to ink-on-gold — 8.16:1, and the
   conventional luxury treatment besides. */
.magic-button-text {
  color: #0b0b0c;
  background-image: linear-gradient(0deg, var(--oro-gold-deep), var(--oro-gold-core));
}

/* Ambient sweep behind the magic button. */
.global-bg {
  background-image: linear-gradient(
    #fff 9%,
    var(--oro-gold-light) 31%,
    #b9903a 47%,
    var(--oro-gold-light) 67%,
    #fff 88%
  );
}

/* Footer mail link — 12.23:1 on the footer ground. */
.footer-mail-2 {
  color: var(--oro-gold-bright);
}

/* --- deliberate exceptions to the generated sweep -------------------------
   oro-gold-auto.css maps blue literals to gold by preserving lightness. That is
   right for glows and strokes and wrong for large flooded areas: .footer-sc was
   a mid-blue #2476cc, which maps to a bright #cc9924 and would put a garish gold
   band across the full width of the footer. Large grounds go to ink instead. */

.footer-sc {
  background-color: var(--_colors---neutral--800, #080808);
}

.cta-sc {
  background-image:
    url("../images/oro-cta-bg.webp"),
    linear-gradient(180deg, #0b0a08 22%, #1a1409 62%, #080808);
}

/* --- hero copy clears the dynamic island ----------------------------------
   Not a palette rule, but this is the first layer after oro.css that no other
   lane writes to, and oro.css itself is enhance-only.

   .hero-text-wrapper is positioned by oro.css at top:26rem (and top:14vh in one
   media query). The HTML/CSS island that replaced the Rive binary renders at the
   top of the phone screen and lands on the eyebrow line, so "The AI-Powered
   Utility Token…" sits underneath "Congrats! Module 4 complete!". Measured
   overlap: 62px at 710w, 79px at 1440w.

   margin-top rather than a new top value, so this composes with whichever of the
   two base rules is live and does not fight the scroll-driven translateY the
   hero timeline writes to this element.

   The clamp is chosen to leave ~22px of clearance at both measured widths:
     710w  -> 7vw is 49.7, floors to 84px, clears 62px by 22
     1440w -> 7vw is 100.8px,             clears 79px by 22                    */
.hero-text-wrapper {
  margin-top: clamp(84px, 7vw, 108px);
}