/* ============================================================
   COLORS — María Ynés Linares
   Dual-color emotional system.
   Púrpura leads personal / family / tips / recipes.
   Teal leads health / weight / challenges / results.
   Lavender, rose, gold are ALWAYS accents, never leads.
   ============================================================ */

:root {
  /* ---- Brand primitives (from the official brandboard) ---- */
  --myl-purple:        #764b90;  /* Púrpura principal — dominant */
  --myl-lavender:      #cbaad5;  /* Lavanda — universal complement */
  --myl-teal:          #2b9fa2;  /* Turquesa wellness — health dominant */
  --myl-rose:          #f8d5d4;  /* Rosa palo — tenderness accent */
  --myl-gold:          #c79b51;  /* Oro sólido — premium accent */

  /* ---- Purple ramp (tints & shades of #764b90) ---- */
  --purple-50:   #f4f0f7;
  --purple-100:  #e7ddef;
  --purple-200:  #cfbade;
  --purple-300:  #b292c8;
  --purple-400:  #936bae;
  --purple-500:  #764b90;   /* base */
  --purple-600:  #633d7a;
  --purple-700:  #4f3062;
  --purple-800:  #3b244a;
  --purple-900:  #281831;   /* deep — dark-mode canvas */

  /* ---- Lavender ramp ---- */
  --lavender-100: #f3ecf7;
  --lavender-200: #e4d4ee;
  --lavender-300: #d8c0e4;
  --lavender-400: #cbaad5;  /* base */
  --lavender-500: #b78fc6;

  /* ---- Teal ramp (tints & shades of #2b9fa2) ---- */
  --teal-50:    #eaf6f6;
  --teal-100:   #cfeceb;
  --teal-200:   #9fd8d7;
  --teal-300:   #66c1c1;
  --teal-400:   #3fadae;
  --teal-500:   #2b9fa2;    /* base */
  --teal-600:   #238486;
  --teal-700:   #1c686a;
  --teal-800:   #154d4f;
  --teal-900:   #0f3739;

  /* ---- Rose ramp ---- */
  --rose-100:   #fdf0ef;
  --rose-200:   #fbe2e1;
  --rose-300:   #f8d5d4;   /* base */
  --rose-400:   #f0b8b6;

  /* ---- Gold — solid + foil gradient ---- */
  --gold-300:   #e3c889;
  --gold-400:   #d4ad64;
  --gold-500:   #c79b51;   /* base solid */
  --gold-600:   #a87f3c;
  /* Gold foil texture: use as background-image where premium accents call for it */
  --gold-foil: linear-gradient(
      135deg,
      #b8893f 0%,
      #e8cf8a 18%,
      #f6e9b8 32%,
      #c79b51 50%,
      #9c7333 64%,
      #e3c47e 82%,
      #b8893f 100%) /* @kind color */;

  /* ---- Neutrals — warm, cream-based (never cold grey) ---- */
  --cream:       #faf7f2;   /* Fondo base — soft cream */
  --white:       #ffffff;
  --ink-900:     #2b2230;   /* warm near-black with a violet cast */
  --ink-700:     #4a4150;
  --ink-500:     #6f6675;
  --ink-300:     #a59caa;
  --ink-200:     #c9c3cd;
  --line-soft:   #ece6f0;   /* hairline on cream */
  --line-cream:  #efe9e1;   /* hairline, warmer */

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

  /* Surfaces */
  --surface-page:        var(--cream);
  --surface-card:        var(--white);
  --surface-raised:      var(--white);
  --surface-sunken:      #f3eef6;
  --surface-purple:      var(--purple-500);   /* dramatic dark sections */
  --surface-purple-deep: var(--purple-900);   /* dark-mode canvas */
  --surface-teal:        var(--teal-500);
  --surface-lavender:    var(--lavender-100);
  --surface-rose:        var(--rose-100);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-purple: #ffffff;
  --text-on-teal:   #ffffff;
  --text-accent:    var(--purple-500);
  --text-script:    var(--purple-500);  /* Parisienne keyword default ink */

  /* Lines / borders */
  --border-soft:    var(--line-soft);
  --border-strong:  var(--purple-200);
  --border-teal:    var(--teal-200);

  /* Brand-intent roles */
  --content-personal:  var(--purple-500);  /* family · personal · tips · recipes */
  --content-health:    var(--teal-500);    /* health · weight · challenges · results */
  --accent-soft:       var(--lavender-400);
  --accent-tender:     var(--rose-300);
  --accent-premium:    var(--gold-500);

  /* Interactive */
  --focus-ring:        var(--lavender-400);
  --overlay-scrim:     rgba(40, 24, 49, 0.55);
}