/* Xtreme Gym (xtremecr.com) over Warriors' screens, loaded last on every page by tools/stage.py.
   Their look: near-black #090909, one yellow #F6C400 with black text on it, white headlines in a heavy, wide,
   upright grotesque, small uppercase labels with wide tracking. Archivo at 125% width and 900 stands in for it. */

/* ---- Type: upright, wide, heavy. Nothing slants. */
:root { --display: "Archivo", system-ui, sans-serif; --stretch: 125%; --stretch-btn: 115%; --track: -.015em; }
*, *::before, *::after { font-style: normal !important; }

/* ---- The trainer's screens: dark first (the page's own script defaults to dark here), and a light one that keeps
   the black slab and the yellow. */
[data-theme="dark"] {
  --bg: #090909; --surface: #121212; --surface-2: #1B1B1B;
  --ink: #F5F5F2; --ink-2: #A3A3A3; --line: #2A2A2A;
  --cobalt: #F6C400; --cobalt-2: #D4A900; --on-cobalt: #090909; --link: #F6C400;
  --ghost: rgba(245, 245, 242, .07); --scrim: rgba(9, 9, 9, .82);
  --m-body: #1E1E1E; --m-rest: #343434; --m-pri: #F6C400; --m-sec: #2B250C; --m-sec-ink: #F6C400; --m-hover: #FFFFFF; --m-glow: rgba(246, 196, 0, .55);
  --logo-filter: none; --logo-blend: normal;
  --h1: #2B250C; --h2: #5A4A08; --h3: #9A7E04; --h4: #D4A900; --h5: #FFE066;
  --wall-blend: screen; --wall-fill: #000; --wall-ink: #1F1F1F; --wall-on: #2B250C; --wall-on-ink: #8A7000; --spot: rgba(246, 196, 0, .09);
  --slab: linear-gradient(168deg, #1A1A1A 0%, #101010 46%, #050505 100%); --slab-line: #2A2A2A;
}
[data-theme="light"] {
  --bg: #EFEFED; --surface: #FFFFFF; --surface-2: #E4E4E1;
  --ink: #090909; --ink-2: #4A4A4A; --line: #CFCFCB;
  --cobalt: #F6C400; --cobalt-2: #D4A900; --on-cobalt: #090909; --link: #7A6200;
  --m-body: #DCDCD8; --m-rest: #BDBDB8; --m-pri: #E0B200; --m-sec: #FBEBA8; --m-sec-ink: #7A6200; --m-hover: #090909; --m-glow: rgba(246, 196, 0, .6);
  --logo-filter: none; --logo-blend: normal;
  --h1: #FBEFC0; --h2: #F8DC6A; --h3: #F6C400; --h4: #B38F00; --h5: #5C4A00;
  --wall-blend: multiply; --wall-fill: #fff; --wall-ink: #D2D2CE; --wall-on: #FBEBA8; --wall-on-ink: #B38F00; --spot: rgba(246, 196, 0, .10);
  --slab: linear-gradient(168deg, #1A1A1A 0%, #101010 46%, #050505 100%); --slab-line: #2A2A2A;
}
/* The bodies on the black slab: dark muscles, the worked ones in yellow. */
[data-theme] .stage, [data-theme] .on-slab, [data-theme] .pair { --fig-body: #262626; --fig-rest: #3A3A3A; --m-pri: #F6C400; --m-sec-ink: #F6C400; }

/* ---- The member's page, the terms and the PIN (their tokens sit on :root): always dark, like Xtreme's own app. */
:root:not([data-theme]) {
  color-scheme: dark;
  --bg: #090909; --ink: #F5F5F2; --soft: #A3A3A3; --line: #262626; --plate: #161616;
  --accent: #F6C400; --go: #F6C400; --on-go: #090909; --tint: #2B250C; --ok: #1A8F55;
  --warn: #F6C400; --on-warn: #090909; --logo-filter: none;
}

/* ---- The terms-and-PIN screen (gate.js, its own --wg-* tokens): dark, and its button yellow with black text. */
:root .wg.wg { --wg-bg: #090909; --wg-ink: #F5F5F2; --wg-soft: #A3A3A3; --wg-line: #262626; --wg-plate: #161616; --wg-go: #F6C400; --wg-ok: #F6C400; --wg-bad: #FF8A80; --wg-logo: none; }
.wg .wg-go { color: #090909; }

/* ---- Details. */
/* The slab fades to black at the foot, not to the cobalt's navy. */
.on-slab::after { background: linear-gradient(transparent, rgba(5, 5, 5, .9)); }
/* Xtreme's mark is a square badge: shown whole, in a thin gold frame, as in their own header. */
.brand img, .wbside-brand img { object-position: center; border: 1px solid rgba(246, 196, 0, .55); }
.brand img { width: 44px; height: 44px; }

/* ---- The member's "go" (green in Warriors) is Xtreme's yellow, with black on it, like their "Inscribirme". */
:root:not([data-theme]) { --ok: #F6C400; }
.h-go, .start, .ask .yes.cont, .nx-go, .walk .next:not(.here), .cheer .lean, .pp-go, .cur-t, .done-b { color: #090909; }
/* The mark fills its frame (where the browser can crop it; elsewhere the whole badge shows). */
.brand img, .wbside-brand img { object-view-box: inset(17% 13% 13% 13%); }
/* No green on Xtreme's home: "Desde Excel" is a black step like "Paso a paso", and the back-view switch is yellow. */
[data-theme] .step.xl { background: #111111; box-shadow: inset 0 1px 0 #2A2A2A; color: #F5F5F2; }
[data-theme] .step.xl:hover, [data-theme] .step.xl:focus-visible { background: #262626; }
.flip { background: #F6C400; color: #090909; }