/* ============================================================
   MULLET PARTY — DESIGN TOKENS
   Tier 1 brand + a11y system.
   Loaded BEFORE concept-styles.css so primaries cascade everywhere.
   ============================================================ */

:root {
  /* ---------- GLOBAL BRAND CONSTANTS ----------
     Always apply. Never overridden by section. */
  --mp-cream:   #FAF4E7;
  --mp-ink:     #121212;
  --mp-mustard: #D4A72C;

  /* ---------- SECTION PRIMARIES ----------
     One per route. AA-validated on white. */
  --mp-shop:      #B82B5F;   /* darker pink, 4.6:1 on white */
  --mp-corporate: #7A1F2B;   /* oxblood, 9.6:1 on white, B2B voice */
  --mp-weddings:  #0F6F50;   /* darker mint, 5.0:1 on white */
  --mp-about:     #5650B0;   /* darker purple, 5.0:1 on white */
  --mp-camps:     var(--mp-mustard);  /* placeholder, revisit later */
  --mp-quiz:      var(--mp-ink);

  /* ---------- SECTION PRIMARY RGB CHANNELS ----------
     Parallel tokens so rgba() forms (grids, shadows, hairlines)
     can stay section-aware. */
  --mp-shop-rgb:      184, 43, 95;
  --mp-corporate-rgb: 122, 31, 43;
  --mp-weddings-rgb:  15, 111, 80;
  --mp-about-rgb:     86, 80, 176;
  --mp-camps-rgb:     212, 167, 44;
  --mp-quiz-rgb:      18, 18, 18;

  /* ---------- ACTIVE SECTION ----------
     Components reference these. Body[data-section] overrides them. */
  --mp-section-primary:     var(--mp-shop);
  --mp-section-primary-rgb: var(--mp-shop-rgb);
  /* --mp-section-primary-hover lives on `body` so the inner var() is
     re-resolved against body's cascade (which carries data-section overrides). */

  /* ---------- LEGACY TOKENS PRESERVED ----------
     Moved from concept-styles.css. Kept for the non-primary
     palette references (pink-light, splash-*, neutrals). */
  --teal-deep:   #04342C;
  --teal-deeper: #022721;

  --pink-hot-dark: #993556;
  --pink-light:    #ED93B1;
  --pink-light-bg: #4B1528;
  --pink-rose:     #E84A6A;
  --pink-coral:    #F26F84;
  --pink-pale:     #FBE0EA;
  --pink-deeper:   #7A2640;

  --splash-purple: #7F77DD;
  --splash-teal:   #1D9E75;
  --splash-blue:   #378ADD;
  --splash-green:  #4E7E1F;  /* darkened from #639922 for AA on white (savings text) */
  --splash-mint:   #22D3A5;
  --mp-corp-glow:  #6FBE9E;  /* forest-mint accent for corporate dark surfaces (replaced mustard) */

  --white:          #FFFFFF;
  --gray-surface:   #F4F4F0;
  --border:         rgba(0, 0, 0, 0.10);
  --text-primary:   #1A1A1A;
  --text-secondary: #5F5E5A;
}

/* ============================================================
   SECTION PRIMARY OVERRIDES (per route on <body data-section>)
   --mp-section-primary-hover is recomputed on every body element so it
   reflects the body-level --mp-section-primary override, not the :root value.
   ============================================================ */
body {
  --mp-section-primary-hover: color-mix(in srgb, var(--mp-section-primary) 85%, black);
}

body[data-section="shop"] {
  --mp-section-primary:     var(--mp-shop);
  --mp-section-primary-rgb: var(--mp-shop-rgb);
}
body[data-section="corporate"] {
  --mp-section-primary:     var(--mp-corporate);
  --mp-section-primary-rgb: var(--mp-corporate-rgb);
}
body[data-section="weddings"] {
  --mp-section-primary:     var(--mp-weddings);
  --mp-section-primary-rgb: var(--mp-weddings-rgb);
}
body[data-section="about"] {
  --mp-section-primary:     var(--mp-about);
  --mp-section-primary-rgb: var(--mp-about-rgb);
}
body[data-section="camps"] {
  --mp-section-primary:     var(--mp-camps);
  --mp-section-primary-rgb: var(--mp-camps-rgb);
}
body[data-section="mystery"] {
  --mp-section-primary:     #D4537E;   /* pink hot, bright on the dark mystery field */
  --mp-section-primary-rgb: 212, 83, 126;
}

/* Quiz: scoped to the quiz section blocks rather than full-body,
   because quiz is an anchor on home, not its own route. */
#quiz,
#mullet-character {
  --mp-section-primary:     var(--mp-quiz);
  --mp-section-primary-rgb: var(--mp-quiz-rgb);
}

/* ============================================================
   FLAMINGO SVG SYMBOL — color inheritance hook
   Any <use href="#flamingo"> will fill its formerly-pink parts
   with the active section primary (because those parts now use
   fill="currentColor" in the symbol definition).
   ============================================================ */
use[href$="#flamingo"],
svg .flamingo {
  color: var(--mp-section-primary);
}