/* America's Army Command launcher: design tokens.
   Source of truth for colors, type, spacing, radii, glass and shadows used in every screen of this folder.
   The screen files use these values inline (exported from the design canvas); in code, use the variables. */

:root {
  /* Ground and surfaces */
  --aac-ground: #0b0c0e;              /* page base under the photo */
  --aac-panel: #141619;               /* solid panel fallback */
  --aac-glass: rgba(18, 20, 23, 0.58);       /* modals, menus, big panels */
  --aac-glass-soft: rgba(18, 20, 23, 0.50);  /* cards on the photo, top-bar buttons */
  --aac-tile: rgba(255, 255, 255, 0.045);    /* rows and cards on glass */
  --aac-tile-strong: rgba(255, 255, 255, 0.07);
  --aac-tile-active: rgba(255, 255, 255, 0.11); /* selected row */
  --aac-seg-active: rgba(255, 255, 255, 0.14);  /* active segment / tab */
  --aac-field: rgba(8, 9, 11, 0.50);         /* inputs, segmented tracks, bar tracks */
  --aac-edge: #2a2e33;                       /* input border */
  --aac-edge-glass: rgba(255, 255, 255, 0.09); /* 1px inner outline of glass */
  --aac-dim: rgba(8, 9, 11, 0.40);           /* darken the photo behind a modal */

  /* Text */
  --aac-text: #e9ecef;
  --aac-text-2: #c3cad1;
  --aac-text-body: #b9c0c7;
  --aac-muted: #9aa3ad;
  --aac-faint: #8a929b;

  /* Accents */
  --aac-gold: #d9a441;        /* the one action color: primary buttons, selection ring, progress */
  --aac-gold-hover: #e8b65a;
  --aac-gold-text: #e8bd68;   /* gold used as text (links, player names) */
  --aac-on-gold: #141619;
  --aac-olive: #4b5a2e;       /* TEST tag, avatar */
  --aac-online: #a3bf6b;      /* online status, good ping, kills */
  --aac-honor: #6fa8dc;       /* honor, experience bar */
  --aac-error: #e0605a;       /* error outline, full server bar */
  --aac-error-text: #f07a74;  /* error text, deaths, Exit */
  --aac-discord: #5865f2;

  /* Indicator bars (profile, ranking) */
  --aac-activity: #d9a441;
  --aac-popularity: #a3bf6b;
  --aac-experience: #6fa8dc;

  /* Type */
  --aac-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* headings, buttons, labels: always uppercase */
  --aac-font-body: 'Inter', system-ui, sans-serif;
  --aac-font-data: 'IBM Plex Mono', ui-monospace, monospace;          /* numbers that change */

  --aac-text-hero: 92px;      /* launcher hero, line-height 0.9 */
  --aac-text-hero-web: 112px; /* website hero */
  --aac-text-h1: 72px;        /* page titles (Ranking, profile name) */
  --aac-text-h2: 38px;        /* modal titles */
  --aac-text-h3: 24px;        /* card titles */
  --aac-text-label: 14px;     /* labels: weight 600, letter-spacing 0.16em, uppercase */
  --aac-text-body-lg: 17px;
  --aac-text-body-size: 15px; /* was a second --aac-text-body, which overrode the colour */
  --aac-text-small: 13px;
  --aac-text-data-xl: 34px;
  --aac-text-data: 15px;

  --aac-tracking-label: 0.16em;
  --aac-tracking-button: 0.14em;

  /* Spacing (4px base) */
  --aac-space-1: 4px;
  --aac-space-2: 8px;
  --aac-space-3: 12px;
  --aac-space-4: 16px;
  --aac-space-5: 20px;
  --aac-space-6: 24px;
  --aac-space-7: 28px;
  --aac-space-8: 32px;
  --aac-space-10: 40px;      /* page side padding */

  /* Radii */
  --aac-radius-tag: 4px;
  --aac-radius-control: 6px;  /* buttons, inputs */
  --aac-radius-row: 10px;     /* rows, cards, menus */
  --aac-radius-window: 14px;  /* modals, big panels */

  /* Control heights */
  --aac-h-play: 68px;   /* GRAJ ONLINE / PLAY ONLINE */
  --aac-h-button: 52px; /* panel actions */
  --aac-h-small: 44px;  /* top bar, row actions, inputs 44-48 */

  /* Glass and shadows */
  --aac-blur: blur(24px) saturate(140%);
  --aac-blur-soft: blur(16px) saturate(140%);
  --aac-shadow-window: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 90px rgba(0, 0, 0, 0.5);
  --aac-shadow-play: 0 14px 40px rgba(217, 164, 65, 0.22);
  --aac-ring-selected: inset 0 0 0 2px #d9a441;
}

/* Reusable pieces matching the screens */
.aac-glass { background: var(--aac-glass); -webkit-backdrop-filter: var(--aac-blur); backdrop-filter: var(--aac-blur); box-shadow: var(--aac-shadow-window); border-radius: var(--aac-radius-window); }
.aac-glass-soft { background: var(--aac-glass-soft); -webkit-backdrop-filter: var(--aac-blur-soft); backdrop-filter: var(--aac-blur-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.aac-label { font-family: var(--aac-font-display); font-weight: 600; font-size: var(--aac-text-label); letter-spacing: var(--aac-tracking-label); text-transform: uppercase; color: var(--aac-muted); }
.aac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; border: 0; border-radius: var(--aac-radius-control); cursor: pointer; text-decoration: none; text-transform: uppercase; font-family: var(--aac-font-display); font-weight: 700; white-space: nowrap; }
.aac-btn--primary { height: var(--aac-h-button); padding: 0 28px; background: var(--aac-gold); color: var(--aac-on-gold); font-size: 19px; letter-spacing: var(--aac-tracking-button); }
.aac-btn--primary:hover { background: var(--aac-gold-hover); }
.aac-btn--secondary { height: var(--aac-h-button); padding: 0 24px; background: var(--aac-tile-strong); color: var(--aac-text); font-size: 18px; letter-spacing: 0.12em; box-shadow: inset 0 0 0 1px #3a3f45; }
.aac-btn--ghost { height: var(--aac-h-button); padding: 0 22px; background: transparent; color: var(--aac-text-2); font-size: 18px; letter-spacing: 0.12em; box-shadow: inset 0 0 0 1px var(--aac-edge); }
.aac-btn--play { height: var(--aac-h-play); min-width: 320px; padding: 0 40px; background: var(--aac-gold); color: var(--aac-on-gold); font-size: 28px; letter-spacing: 0.16em; box-shadow: var(--aac-shadow-play); }
.aac-input { height: 48px; width: 100%; box-sizing: border-box; padding: 0 14px; background: var(--aac-field); border: 1px solid var(--aac-edge); border-radius: var(--aac-radius-control); color: var(--aac-text); font: 15px var(--aac-font-body); outline: none; }
.aac-input:focus { border-color: var(--aac-gold); }
.aac-tag { font-family: var(--aac-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px 1px; border-radius: var(--aac-radius-tag); }