/* ============================================================
   DIGITAL PREMIUM — COLOR TOKENS  (línea gráfica oficial)
   Purple-dominant: deep plum backgrounds lit by orchid/fuchsia
   glows, with a yellow-lime highlight on key words and CTAs.
   Values sampled from the official social creatives.
   ============================================================ */

:root {
  /* ---- Brand purples (the signature family) ---- */
  --dp-plum-950:     #2E052B;   /* deepest background, vignettes        */
  --dp-plum-900:     #350941;   /* core background                      */
  --dp-plum-800:     #420A48;   /* background mid tone                  */
  --dp-grape:        #610978;   /* lit background / spotlight           */
  --dp-purple:       #6D1B99;   /* chip gradient start, core purple     */
  --dp-orchid:       #963395;   /* chip gradient end                    */
  --dp-fuchsia:      #9F30B8;   /* glow / neon highlight                */
  --dp-magenta:      #B620D0;   /* hot neon rim light                   */
  --dp-violet:       #5119C7;   /* electric violet (secondary)          */
  --dp-lavender:     #E6D6EE;   /* light variant tint                   */
  --dp-lavender-50:  #F7F1F9;   /* light variant page                   */
  --dp-plum-ink:     #2A0A3D;   /* headline ink on light backgrounds    */

  /* ---- Legacy spectrum (kept for compatibility) ---- */
  --dp-crimson:      #E4093B;   /* danger / expired                     */
  --dp-red:          #C8102E;
  --dp-blue:         #2536D8;
  --dp-indigo:       #1B1F66;

  /* ---- Accents ---- */
  --dp-lime:         #D4D32C;   /* brand yellow-lime — the highlight    */
  --dp-lime-bright:  #E2E13F;   /* hover / glow                         */
  --dp-gold:         #FFC400;   /* warning                              */
  --dp-whatsapp:     #25D366;   /* WhatsApp green (contact only)        */

  /* ---- Ink / neutrals (plum-black family) ---- */
  --dp-black:        #170620;   /* page black, plum                     */
  --dp-ink-900:      #210A2C;   /* deepest surface                      */
  --dp-ink-800:      #2C0F3B;   /* raised surface                       */
  --dp-ink-700:      #3A164D;   /* card on dark                         */
  --dp-ink-600:      #4C2263;   /* hairline / border on dark            */
  --dp-ink-500:      #653483;   /* muted stroke                         */
  --dp-navy:         #2A0A3D;   /* on-light headline (now plum ink)     */

  --dp-gray-400:     #B89CC9;   /* muted text on dark                   */
  --dp-gray-300:     #DCCAE6;   /* secondary text on dark               */
  --dp-gray-200:     #E6D6EE;
  --dp-gray-100:     #F2EAF6;
  --dp-white:        #FFFFFF;
  --dp-off-white:    #F7F1F9;   /* light page bg (lavender)             */

  /* ---- Semantic ---- */
  --dp-success:      #2ECC71;
  --dp-warning:      #FFC400;
  --dp-danger:       #E4093B;
  --dp-info:         #9F30B8;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */

  /* Surfaces (dark-first product) */
  --surface-page:        var(--dp-black);
  --surface-base:        var(--dp-ink-900);
  --surface-raised:      var(--dp-ink-800);
  --surface-card:        var(--dp-ink-700);
  --surface-overlay:     rgba(23, 6, 32, 0.74);
  --surface-light:       var(--dp-off-white);
  --surface-light-card:  var(--dp-white);

  /* Text */
  --text-strong:    var(--dp-white);
  --text-body:      var(--dp-gray-300);
  --text-muted:     var(--dp-gray-400);
  --text-on-light:  var(--dp-plum-ink);
  --text-on-light-muted: #6B4C7E;
  --text-accent:    var(--dp-lime);
  --text-link:      var(--dp-lime);

  /* Borders */
  --border-subtle:  var(--dp-ink-600);
  --border-strong:  var(--dp-ink-500);
  --border-accent:  var(--dp-lime);
  --border-glow:    var(--dp-fuchsia);
  --border-on-light: rgba(42, 10, 61, 0.14);

  /* Interactive (primary action = lime CTA) */
  --action-primary-bg:       var(--dp-lime);
  --action-primary-text:     var(--dp-plum-ink);
  --action-primary-hover:    var(--dp-lime-bright);
  --action-secondary-bg:     var(--dp-purple);
  --action-secondary-text:   var(--dp-white);
  --action-secondary-hover:  var(--dp-orchid);
  --action-ghost-border:     var(--dp-ink-500);
  --focus-ring:              var(--dp-lime);
}