/* Arena X — Brand Tokens */

/* @import MUST be first so any HTML linking brand.css gets fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  /* Brand palette */
  --ax-pink:   #D91F8C;
  --ax-cyan:   #2BC4E0;
  --ax-purple: #8B3FCE;
  --ax-dark:   #08090D;
  --ax-white:  #FFFFFF;

  /* Semantic */
  --ax-bg:        var(--ax-dark);
  --ax-surface:   #14151A;
  --ax-surface-2: #1C1D23;
  --ax-border:    rgba(255, 255, 255, 0.08);
  --ax-text:      var(--ax-white);
  --ax-text-dim:  rgba(255, 255, 255, 0.65);
  --ax-text-mute: rgba(255, 255, 255, 0.4);

  /* Status */
  --ax-success: #2BC4E0;
  --ax-warn:    #FFB020;
  --ax-danger:  #FF4757;

  /* Type */
  --ax-font-display: 'Barlow Condensed', system-ui, sans-serif;
  --ax-font-body:    'DM Sans', system-ui, sans-serif;

  /* Radii + shadows */
  --ax-radius-sm: 8px;
  --ax-radius-md: 14px;
  --ax-radius-lg: 22px;
  --ax-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --ax-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* Base helpers (safe to apply everywhere) */
.ax-display { font-family: var(--ax-font-display); letter-spacing: 0.5px; text-transform: uppercase; }
.ax-body    { font-family: var(--ax-font-body); }