/* ============================================================
   ARENA · COLOR TOKENS
   "Color supports the tone; it does not define the brand."
   Tight palette, high contrast. Navy + Purple are structural;
   Lime + Magenta are rare accents. Surfaces sit on warm off-white.
   ============================================================ */

:root {
  /* ---- Brand core ---------------------------------------- */
  --arena-navy:          #151549; /* headings, plan names, strong text, dark surfaces */
  --arena-purple:        #7b5eff; /* PRIMARY accent — CTAs, checks, active states     */
  --arena-purple-light:  #a997fb; /* toggle-active bg, hover states                   */
  --arena-purple-tint:   #d6ceff; /* soft purple wash, selected rows                  */
  --arena-purple-wash:   #efeafe; /* faintest purple surface                          */

  /* ---- Accents (use sparingly) --------------------------- */
  --arena-lime:          #d2ef00; /* highlights, badges, accent pops                  */
  --arena-lime-tint:     #ecf4b8; /* soft lime surface                                */
  --arena-magenta:       #c539c1; /* secondary accent — sparingly only                */

  /* ---- Status ------------------------------------------- */
  --arena-success:       #4ade80; /* success banners, confirmation                    */
  --arena-success-deep:  #16a34a;
  --arena-warning:       #f59e0b;
  --arena-danger:        #e5484d;

  /* ---- Neutrals ----------------------------------------- */
  --arena-ink:           #151549; /* darkest text == navy                             */
  --arena-gray:          #5d5d68; /* editorial mid-gray (brand spec)                  */
  --arena-gray-text:     #64748b; /* descriptions, secondary body                     */
  --arena-gray-soft:     #94a3b8; /* tertiary / placeholder                           */
  --arena-border:        #e8e5e5; /* card borders, dividers                           */
  --arena-border-strong: #d8d4d4;
  --arena-bg:            #f4f2f2; /* page background — warm off-white                  */
  --arena-bg-raised:     #faf9f9; /* slightly raised panels                           */
  --arena-white:         #ffffff;

  /* ---- Semantic aliases (use these in product) ---------- */
  --surface-page:        var(--arena-bg);
  --surface-card:        var(--arena-white);
  --surface-raised:      var(--arena-bg-raised);
  --surface-dark:        var(--arena-navy);
  --surface-selected:    #efeafe;

  --text-strong:         var(--arena-navy);
  --text-body:           var(--arena-gray);
  --text-muted:          var(--arena-gray-text);
  --text-faint:          var(--arena-gray-soft);
  --text-on-dark:        var(--arena-white);
  --text-on-accent:      var(--arena-white);

  --accent-primary:      var(--arena-purple);
  --accent-primary-hover:#6a4ef0;     /* "darken slightly" on hover            */
  --accent-primary-press:#5a3fe0;
  --accent-secondary:    var(--arena-magenta);
  --accent-pop:          var(--arena-lime);

  --border-default:      var(--arena-border);
  --border-strong:       var(--arena-border-strong);
  --border-focus:        var(--arena-purple);

  --check:               var(--arena-purple);
  --link:                var(--arena-purple);
}