/**
 * MyMonii brand override
 *
 * Loaded AFTER tokens.css AND site.css so MyMonii's specific overrides
 * always win against the 256Bank defaults.
 *
 * Two channels:
 *   1. Token re-map  — purple-* names resolve to lavender-* values
 *      so the rest of the design system follows automatically.
 *   2. Targeted rules — hero, wordmark, etc. that 256Bank hard-coded
 *      to a "dark island" style; MyMonii is softer, lighter, warmer.
 */
:root {
  /* Token re-map: 256Bank's purple ramp → MyMonii's lavender ramp. */
  --purple-50:  var(--lavender-50);
  --purple-100: var(--lavender-100);
  --purple-200: var(--lavender-200);
  --purple-300: var(--lavender-300);
  --purple-400: var(--lavender-400);
  --purple-500: var(--lavender-500);
  --purple-600: var(--lavender-600);
  --purple-700: var(--lavender-700);
  --purple-800: var(--lavender-800);
  --purple-900: var(--lavender-900);

  /* Wordmark constants. */
  --mm-wordmark-my:    var(--lavender-500);   /* #9874D3 */
  --mm-wordmark-monii: var(--coral-400);      /* #F2827F */

  /* Hero gradient — soft lavender → coral pastel.
   * Replaces 256Bank's navy/purple dark island. */
  --grad-platform: linear-gradient(135deg,
    var(--lavender-100) 0%,
    var(--lavender-200) 45%,
    var(--coral-100)   100%);

  /* Mark gradients on the lavender side (in case any other surface
   * uses them). */
  --grad-mark-purple-dark:  linear-gradient(135deg, #C2A8EB 0%, #AD8DE0 55%, #9874D3 100%);
  --grad-mark-purple-light: linear-gradient(135deg, #9874D3 0%, #7E58B7 55%, #614196 100%);
}

/* ── Wordmark: two-tone "My" + "Monii" ─────────────────────────────── */

.brand-lockup .wordmark .mm-my {
  color: var(--mm-wordmark-my);
  font-weight: var(--fw-semibold);
}
.brand-lockup .wordmark .accent {
  color: var(--mm-wordmark-monii);
  font-weight: var(--fw-semibold);
}
.theme-dark .brand-lockup .wordmark .mm-my { color: var(--lavender-300); }
.theme-dark .brand-lockup .wordmark .accent { color: var(--coral-300); }

/* ── Hero: light island, not dark island ───────────────────────────── */

.hero {
  /* MyMonii's hero is a soft, warm pastel — not 256Bank's dark
   * institutional register. Everything below this rule trumps the
   * "always dark" hero in 256Bank's site.css. */
  background: var(--grad-platform);
  color: var(--ink);
}

.hero::before {
  /* Soft coral glow behind the headline instead of the purple haze
   * 256Bank uses. */
  background: radial-gradient(ellipse at 50% 35%,
    rgba(242,130,127,0.18) 0%, transparent 60%);
}

.hero-title {
  color: var(--ink);
}
.hero-title .em {
  /* "Built to grow up with you." in lavender for emphasis. */
  color: var(--lavender-600);
}
.hero-eyebrow {
  color: var(--lavender-700);
}
.hero-lead {
  color: var(--ink-mid);
}

/* Primary button on the hero: keep it lavender-filled (matches the
 * design system's purple-500 binding) but bump hover to coral-tinged
 * lavender for the youth warmth. */
.hero-actions .btn-primary {
  background: var(--lavender-500);
}
.hero-actions .btn-primary:hover {
  background: var(--lavender-600);
}
.hero-actions .btn-ghost {
  color: var(--lavender-700);
  border-color: var(--lavender-300);
}
.hero-actions .btn-ghost:hover {
  background: var(--lavender-50);
  color: var(--lavender-800);
}