/* ============================================================
   Colors — Meu Marketing Contábil
   Brand: Magenta #DF0069 (primary)  •  Indigo #273C9A (secondary)
   Sampled directly from the brand logo + icon artwork.
   ============================================================ */
:root {
  /* ---- Brand: Magenta (primary) ---- */
  --magenta-50:  #fff0f6;
  --magenta-100: #ffe0ec;
  --magenta-200: #ffb3d0;
  --magenta-300: #fa80ae;
  --magenta-400: #ed3d86;
  --magenta-500: #df0069; /* BRAND PINK */
  --magenta-600: #c2005b;
  --magenta-700: #9e0049;
  --magenta-800: #7a0038;
  --magenta-900: #5c002b;

  /* ---- Brand: Indigo (secondary) ---- */
  --indigo-50:  #eef1fb;
  --indigo-100: #dde3f6;
  --indigo-200: #b6c1ec;
  --indigo-300: #8595de;
  --indigo-400: #4f63c0;
  --indigo-500: #273c9a; /* BRAND INDIGO */
  --indigo-600: #1f3184;
  --indigo-700: #18266b;
  --indigo-800: #131e54;
  --indigo-900: #0e153d;

  /* ---- Neutrals (cool slate, harmonized to indigo) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8fa;
  --neutral-100: #eef0f4;
  --neutral-200: #e0e4ea;
  --neutral-300: #c8cfd9;
  --neutral-400: #9aa3b2;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2733;
  --neutral-900: #0f1622;

  /* ---- Semantic palette ---- */
  --green-500:  #16a34a;
  --green-50:   #e9f7ef;
  --amber-500:  #f59e0b;
  --amber-50:   #fef4e2;
  --red-500:    #dc2626;
  --red-50:     #fdeaea;

  /* ============================================================
     Semantic aliases — prefer these in components/UI
     ============================================================ */
  --color-primary:        var(--magenta-500);
  --color-primary-hover:   var(--magenta-600);
  --color-primary-active:  var(--magenta-700);
  --color-primary-subtle:  var(--magenta-50);
  --color-on-primary:      var(--neutral-0);

  --color-secondary:        var(--indigo-500);
  --color-secondary-hover:  var(--indigo-600);
  --color-secondary-active: var(--indigo-700);
  --color-secondary-subtle: var(--indigo-50);
  --color-on-secondary:     var(--neutral-0);

  /* Text */
  --text-strong:   var(--indigo-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-on-dark:  var(--neutral-0);
  --text-link:     var(--magenta-500);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --surface-inverse: var(--indigo-900);
  --surface-tint:    var(--indigo-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--magenta-500);

  /* Feedback */
  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--red-500);
  --color-info:    var(--indigo-500);

  /* Brand gradient (use sparingly — section accents only) */
  --gradient-brand: linear-gradient(100deg, var(--magenta-500) 0%, var(--indigo-500) 100%);
}