/* The --app-* gorilla-dark token system for the vanilla player app. Ported verbatim
   from themes.scss .client-dark-theme (the gorilla night theme, the ONLY theme the
   player ships - the light/evening blocks and the Material/studio passes are dead for
   the player and are dropped). The play surface (play.css) reads these --app-* tokens
   (the hub/kit chrome reads the separate --mf-* tokens, which shell.css declares on
   :root - do NOT redeclare those here). Declared on :root so the tokens exist before
   the body theme class is applied at boot and inherit everywhere; this loads after
   base.css (which reads --app-bg / --app-text-primary) and before shell.css. The two
   layers are kept: the raw gorilla tokens, then the semantic --app-* aliases that
   resolve onto them (resolved hex shown in comments). Loads second in the order
   base -> tokens -> shell -> hub -> play. */

:root {
  /* Raw gorilla tokens (the --app-* below alias onto these). */
  --bg: #0b0d11;
  --bg-2: #0f1218;
  --surface: #14171e;
  --surface-2: #191d26;
  --surface-3: #20242f;
  --line: #262b36;
  --line-2: #1b1f29;
  --txt: #e7eaf0;
  --txt-2: #b6bdca;
  --mut: #828b9c;
  --faint: #5a6273;
  --acc: #4c8dff;
  --acc-2: #6fa6ff;
  --acc-soft: rgba(76, 141, 255, 0.14);
  --acc-ring: rgba(76, 141, 255, 0.45);
  --grn: #37d67a;
  --grn-soft: rgba(55, 214, 122, 0.14);
  --red: #ff5b6a;
  --red-soft: rgba(255, 91, 106, 0.14);
  --amber: #f0b429;
  --violet: #8b6cff;
  --s1: 4px;
  --s2: 6px;
  --s3: 8px;
  --s4: 12px;
  --s5: 16px;
  --s6: 24px;
  --r-sm: 5px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --t: 140ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --side-w: 210px;

  /* Semantic --app-* aliases (what play.css actually reads; resolved hex in comments). */
  --app-bg: var(--bg); /* #0b0d11 */
  --app-surface: var(--bg-2); /* #0f1218 */
  --app-panel: var(--surface); /* #14171e */
  --app-elevated: var(--surface-3); /* #20242f */
  --app-card: var(--surface); /* #14171e */
  --app-input: var(--surface-2); /* #191d26 */
  --app-hover: var(--surface-3); /* #20242f */
  --app-selected: var(--acc-soft); /* rgba(76,141,255,0.14) */

  --app-text-primary: var(--txt); /* #e7eaf0 */
  --app-text-secondary: var(--txt-2); /* #b6bdca */
  --app-text-muted: var(--mut); /* #828b9c */
  --app-text-on-accent: #ffffff;

  --app-border-subtle: var(--line-2); /* #1b1f29 */
  --app-border: var(--line); /* #262b36 */
  --app-border-strong: var(--surface-3); /* #20242f */

  --app-accent: var(--acc); /* #4c8dff */
  --app-accent-hover: var(--acc-2); /* #6fa6ff */
  --app-accent-subtle: var(--acc-soft); /* rgba(76,141,255,0.14) */
  --app-primary: var(--acc); /* #4c8dff */
  --app-primary-hover: var(--acc-2); /* #6fa6ff */

  --app-success: var(--grn); /* #37d67a */
  --app-danger: var(--red); /* #ff5b6a */
  --app-warning: var(--amber); /* #f0b429 */
  --app-info: var(--acc); /* #4c8dff */

  --app-radius-sm: var(--r-sm); /* 5px */
  --app-radius-md: var(--r); /* 8px */
  --app-radius-lg: var(--r-lg); /* 12px */
  --app-focus-ring: var(--acc-ring); /* rgba(76,141,255,0.45) */

  --app-medal-gold: var(--amber); /* #f0b429 */
  --app-medal-silver: #c4c4c4;
  --app-medal-bronze: #cc8a5c;
}