/* ============================================================
   Shopper Marketing Media. Color Tokens
   Extracted from SMM brand deck (theme1) + logo gradient.
   ============================================================ */
:root {
  /* --- Brand core --- */
  --smm-pink:        #E8176B; /* primary brand pink (most-used) */
  --smm-magenta:     #CE2DF5; /* electric magenta (theme accent)*/
  --smm-orange:      #E37538; /* secondary brand orange          */
  --smm-black:       #222222; /* primary brand black             */

  /* Signature brand gradient (logo: pink -> orange) */
  --smm-gradient:        linear-gradient(90deg, #E8176B 0%, #E54B4F 55%, #E37538 100%); /* @kind other */
  --smm-gradient-diag:   linear-gradient(135deg, #E8176B 0%, #E37538 100%); /* @kind other */
  --smm-gradient-vivid:  linear-gradient(90deg, #CE2DF5 0%, #E8176B 45%, #E37538 100%); /* @kind other */

  /* --- Supporting accents --- */
  --smm-pink-deep:#E8176B; /* deprecated, alias of pink (berry retired) */
  --smm-sand:    #F2E0C9; /* sand accent (warm panels)          */
  --smm-cream:   #F2E0C9; /* alias of sand (kept for refs)      */
  --smm-cream-2: #F7F4EF; /* warm off-white (neutral, not a brand color) */
  --smm-slate:   #5C6F8C; /* slate accent (stats, contrast)     */
  --smm-navy:    #5C6F8C; /* alias of slate (kept for refs)     */
  --smm-gray:    #8A8A8A; /* gray accent                        */
  --smm-teal:    #006F73; /* alias of teal-deep (kept for refs) */
  --smm-teal-deep:#006F73;/* deep teal accent                   */
  --smm-gold:    #FFB84D; /* amber accent                       */

  /* --- Neutrals (ink scale) --- */
  --smm-ink:        #231F20; /* near-black brand ink (wordmark) */
  --smm-ink-900:    #222222;
  --smm-ink-700:    #44413F;
  --smm-ink-500:    #6E6A67;
  --smm-ink-300:    #8A8A8A;
  --smm-line:       #E4DED5; /* warm hairline on cream surfaces */
  --smm-line-cool:  #E6E8EB; /* cool hairline on white          */
  --smm-surface:    #FFFFFF;
  --smm-surface-2:  #F7F4EF; /* warm off-white panel            */
  --smm-surface-3:  #F5F5F5; /* cool light gray                 */
  --smm-white:      #FFFFFF;

  /* --- Semantic aliases --- */
  --color-primary:        var(--smm-pink);
  --color-primary-strong: var(--smm-pink-deep);
  --color-secondary:      var(--smm-orange);
  --color-accent:         var(--smm-teal);

  --text-strong:   var(--smm-ink);
  --text-body:     var(--smm-ink-900);
  --text-muted:    var(--smm-ink-500);
  --text-faint:    var(--smm-ink-300);
  --text-on-brand: #FFFFFF;
  --text-link:     var(--smm-orange);

  --surface-page:  #FFFFFF;
  --surface-card:  #FFFFFF;
  --surface-warm:  var(--smm-cream);
  --surface-dark:  var(--smm-navy);
  --border-card:   var(--smm-line-cool);
  --border-warm:   var(--smm-line);
}