/* Every colour, face, size and radius the site uses. Nothing else in the site names a colour. */
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 100 900; font-display: swap; src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* The page: deep ink, with light behind it for the glass to catch. */
  --bg: #04060c;
  --bg-deep: #020308;
  --aura-blue: rgba(58, 96, 255, 0.5);
  --aura-violet: rgba(132, 84, 255, 0.4);
  --aura-teal: rgba(24, 200, 190, 0.28);
  --aura-rose: rgba(255, 110, 168, 0.16);

  --text: #f5f7fb;
  --dim: rgba(226, 232, 245, 0.68);
  --faint: rgba(226, 232, 245, 0.44);

  /* Glass: a tint, an edge and a highlight. */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-deep: rgba(8, 11, 22, 0.55);
  /* The phone menu's panel: solid, so its items read clearly over any part of the page. */
  --menu-panel: rgb(8, 11, 22);
  --glass-top: rgba(255, 255, 255, 0.11);
  --glass-bottom: rgba(255, 255, 255, 0.025);
  --edge: rgba(255, 255, 255, 0.12);
  --edge-strong: rgba(255, 255, 255, 0.22);
  --edge-soft: rgba(255, 255, 255, 0.07);
  --shine: rgba(255, 255, 255, 0.22);
  --blur: blur(28px) saturate(170%);
  --blur-light: blur(14px) saturate(150%);

  --accent: #6df0d4;
  --accent-ink: #04130f;
  --accent-soft: rgba(109, 240, 212, 0.12);
  --accent-line: rgba(109, 240, 212, 0.38);
  --accent-glow: rgba(109, 240, 212, 0.32);
  --iris: #8fa8ff;
  --iris-soft: rgba(143, 168, 255, 0.14);
  --trainer: #b79cff;
  --trainer-soft: rgba(183, 156, 255, 0.14);
  --trainer-line: rgba(183, 156, 255, 0.42);
  --trainer-glow: rgba(183, 156, 255, 0.3);
  --gold: #ffd58a;
  --gold-soft: rgba(255, 213, 138, 0.14);
  --gold-line: rgba(255, 213, 138, 0.4);
  --success: #63eeb0;
  --success-soft: rgba(99, 238, 176, 0.14);
  --warn: #ffb574;
  --warn-soft: rgba(255, 181, 116, 0.14);
  --warn-line: rgba(255, 181, 116, 0.4);

  /* Form fields, in solid colours (the card fields are drawn by Stripe from these). */
  --field: #0f1426;
  --field-edge: #2a3354;
  --muted: #a9b3cc;
  --muted-faint: #6b7694;

  --white: #ffffff;
  --ink: #05070d;
  --grad-text: linear-gradient(96deg, #ffffff 0%, #c3d0ff 42%, #7ff3dc 100%);
  --grad-mark: linear-gradient(96deg, #c3d0ff 0%, #7ff3dc 100%);
  --grad-trainer: linear-gradient(96deg, #ffffff 0%, #d5c8ff 45%, #b79cff 100%);
  --grad-gold: linear-gradient(96deg, #ffffff 0%, #ffe6b8 45%, #ffd58a 100%);
  --grad-edge: linear-gradient(140deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.2));

  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-deep: 0 60px 140px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 10px 40px rgba(255, 255, 255, 0.16);
  --shadow-btn-rest: 0 6px 24px rgba(255, 255, 255, 0.1);
  --shadow-bar: 0 18px 50px rgba(0, 0, 0, 0.4);
  --scrim: rgba(3, 5, 11, 0.72);

  /* The drawn body. */
  --fig-top: #a9b6d6;
  --fig-bottom: #3a4466;
  --fig-far: #2a3250;
  --fig-glow: rgba(109, 240, 212, 0.22);
  --bone: rgba(255, 255, 255, 0.7);
  --bone-far: rgba(255, 255, 255, 0.24);
  --joint: #ffffff;
  --joint-ring: #0a0f1f;
  --grid: rgba(190, 205, 255, 0.16);
  --floor-shadow: rgba(0, 0, 8, 0.6);
  --weight: #e6ebf7;

  --font-text: 'Geist', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-num: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(84px, 10vw, 150px);
  --header-h: 84px;

  --fast: 180ms;
  --slow: 800ms;
  --curve: cubic-bezier(0.2, 0.7, 0.2, 1);
}