/* ============================================================
   COLOR TOKENS — Plataforma de Eventos
   Two layers:
   · PRIMITIVES  — raw brand anchors, 6 families × 10 steps.
                   Never reference these directly in product UI.
   · SEMANTIC    — intent aliases (the only layer the UI consumes).
   Re-skinning = re-point the semantic layer, no screen touched.

   Environment accents:  indigo = manager · teal = attendee · amber = staff.
   Friction / error = vermilion.
   ============================================================ */

:root {
  /* ---------- PRIMITIVES ---------- */
  /* Indigo — brand primary · manager panel */
  --indigo-50:  #EEEFF6;
  --indigo-100: #DFE1EE;
  --indigo-200: #C0C3DE;
  --indigo-300: #9A9FCA;
  --indigo-400: #747AB6;
  --indigo-500: #4E56A2;
  --indigo-600: #2C3690;
  --indigo-700: #27307E;
  --indigo-800: #22296A;
  --indigo-900: #1D2355;

  /* Teal — secondary · success · attendee */
  --teal-50:  #ECF5F4;
  --teal-100: #DBECEB;
  --teal-200: #B6DAD6;
  --teal-300: #8AC3BE;
  --teal-400: #5FADA5;
  --teal-500: #33978D;
  --teal-600: #0C8377;
  --teal-700: #0C7269;
  --teal-800: #0C5F58;
  --teal-900: #0C4C48;

  /* Amber — accent · warning · staff */
  --amber-50:  #FAF4ED;
  --amber-100: #F6EADD;
  --amber-200: #EDD4BA;
  --amber-300: #E2BA91;
  --amber-400: #D7A168;
  --amber-500: #CC873F;
  --amber-600: #C2701A;
  --amber-700: #A86219;
  --amber-800: #8B5217;
  --amber-900: #6E4215;

  /* Vermilion — error · friction */
  --vermilion-50:  #FCF0EE;
  --vermilion-100: #F9E2DE;
  --vermilion-200: #F3C5BE;
  --vermilion-300: #EBA297;
  --vermilion-400: #E48070;
  --vermilion-500: #DD5D49;
  --vermilion-600: #D63E26;
  --vermilion-700: #BA3723;
  --vermilion-800: #992F1F;
  --vermilion-900: #79271C;

  /* Azure — information */
  --azure-50:  #EDF3FC;
  --azure-100: #DDE9F9;
  --azure-200: #BBD4F3;
  --azure-300: #92BAEB;
  --azure-400: #69A0E4;
  --azure-500: #4086DD;
  --azure-600: #1C6FD6;
  --azure-700: #1A61BA;
  --azure-800: #17519B;
  --azure-900: #14417B;

  /* Neutral — canvas, ink, surfaces, borders */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F5F6F9;
  --neutral-100: #EEF0F5;
  --neutral-200: #E1E4EC;
  --neutral-300: #CDD2DE;
  --neutral-400: #A9B0BF;
  --neutral-500: #8A91A1;
  --neutral-600: #6B7283;
  --neutral-700: #565D6E;
  --neutral-800: #2D3340;
  --neutral-900: #13151B;

  /* ---------- SEMANTIC: TEXT ---------- */
  --text-default:   var(--neutral-900);
  --text-muted:     var(--neutral-700);  /* body-safe muted (6.1:1 AA) */
  --text-subtle:    var(--neutral-500);  /* decorative / large text only */
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--indigo-700);
  --text-link:      var(--indigo-600);
  --text-on-brand:  var(--neutral-0);
  --text-on-warning:var(--neutral-900);  /* white fails AA on amber */
  --text-success:   var(--teal-700);
  --text-warning:   var(--amber-800);
  --text-error:     var(--vermilion-700);
  --text-info:      var(--azure-700);

  /* ---------- SEMANTIC: BACKGROUND ---------- */
  --bg-canvas:         var(--neutral-50);
  --bg-surface:        var(--neutral-0);
  --bg-subtle:         var(--neutral-100);
  --bg-brand:          var(--indigo-600);
  --bg-brand-hover:    var(--indigo-700);
  --bg-brand-active:   var(--indigo-800);
  --bg-brand-subtle:   var(--indigo-50);
  --bg-success-subtle: var(--teal-50);
  --bg-warning-subtle: var(--amber-50);
  --bg-error-subtle:   var(--vermilion-50);
  --bg-info-subtle:    var(--azure-50);

  /* ---------- SEMANTIC: BORDER ---------- */
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);
  --border-brand:   var(--indigo-600);
  --border-focus:   var(--indigo-500);
  --border-error:   var(--vermilion-600);

  /* ---------- SEMANTIC: FEEDBACK FILLS ---------- */
  --feedback-success: var(--teal-600);
  --feedback-warning: var(--amber-600);
  --feedback-error:   var(--vermilion-600);
  --feedback-info:    var(--azure-600);

  /* ---------- SEMANTIC: ENVIRONMENT ACCENTS ---------- */
  --env-manager:  var(--indigo-600);  /* gestor · escritorio */
  --env-staff:    var(--amber-600);   /* staff · tablet */
  --env-attendee: var(--teal-600);    /* asistente · móvil */

  /* ---------- FOCUS RING ---------- */
  --ring-brand: 0 0 0 3px rgba(78, 86, 162, 0.40);
  --ring-error: 0 0 0 3px rgba(214, 62, 38, 0.32);
}