/* ============================================================
   SLATE DESIGN SYSTEM
   Tokens for the Indoor Bike link badges page.

   This page is self-contained (it does not load ../styles.css),
   so the Slate tokens are repeated here. Keep the values in
   sync with ../styles.css :root.
   ============================================================ */

/* Self-hosted font (OFL) - the same file the app and the site ship. No CDN. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope_variable.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* ---------- TYPOGRAPHY ----------
     Slate is a one-family system: Manrope, weight-differentiated.
     The display and mono aliases are kept so existing rules resolve. */
  --font:         "Manrope", system-ui, sans-serif;
  --font-body:    var(--font);
  --font-display: var(--font);
  --font-mono:    var(--font);

  --t-display-xl: 72px;
  --t-display-l:  56px;
  --t-display-m:  40px;
  --t-h1:         32px;
  --t-h2:         24px;
  --t-h3:         20px;
  --t-body:       16px;
  --t-small:      14px;
  --t-micro:      12px;
  --t-tick:       11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  --tr-tight:  -0.02em;
  --tr-normal:  0;

  /* ---------- SURFACES (the five slates, ascending) ---------- */
  --bg-0: #313e50;  /* Charcoal Blue   - canvas */
  --bg-1: #3a435e;  /* Twilight Indigo - cards */
  --bg-2: #455561;  /* Charcoal Blue 2 - wells, chips, dividers */
  --bg-3: #5c6672;  /* Blue Slate      - pressed, dashed outline */
  --bg-4: #6c6f7f;  /* Slate Grey      - disabled ink */

  --line-1: rgba(242,244,247,0.06);
  --line-2: rgba(242,244,247,0.10);
  --line-3: rgba(242,244,247,0.18);

  /* ---------- FOREGROUND ---------- */
  --fg-1: #F2F4F7;
  --fg-2: #C5CAD6;
  --fg-3: #9AA1B0;
  --fg-4: #6c6f7f;
  --on-inverse: #313e50;

  /* ---------- LIGHT MIRROR (the light-background badge) ---------- */
  --paper-0: #FAFBFC;
  --paper-1: #FFFFFF;
  --ink-1:   #1B2330;
  --ink-2:   #4A5566;
  --ink-3:   #7D8798;

  /* ---------- Power zones (the only colour) ----------
     Retuned for Slate. The app's ramp was mixed on a near-black canvas; on
     #313e50 the old Z1 sank into the surfaces, and Z2 / Z6 / Z7 glared. These
     sit in one lightness band so the ramp reads as a family and the dark
     zone labels stay legible on every block. Same seven hues, same order. */
  --zone-1: #8FA8C0;
  --zone-2: #5B9CF2;
  --zone-3: #3FC08A;
  --zone-4: #F0C419;
  --zone-5: #FF9A3D;
  --zone-6: #EF6B62;
  --zone-7: #CE6BF0;

  --success: var(--zone-3);
  --warning: var(--zone-4);
  --danger:  var(--zone-6);
  --info:    var(--fg-1);

  /* ---------- SPACING ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   56px;
  --s-10:  72px;

  /* ---------- RADII ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.40);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.45);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.t-display-xl {
  font-weight: 800;
  font-size: var(--t-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.t-display-l {
  font-weight: 800;
  font-size: var(--t-display-l);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
.t-display-m {
  font-weight: 800;
  font-size: var(--t-display-m);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.t-h1 {
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.t-h2 {
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.t-h3 {
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.t-body {
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}
.t-body-strong {
  font-weight: 700;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}
.t-small {
  font-weight: 500;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
}
.t-micro {
  font-weight: 600;
  font-size: var(--t-micro);
  line-height: var(--lh-snug);
}
/* Section labels: sentence case, untracked. */
.t-eyebrow {
  font-weight: 600;
  font-size: 13px;
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.t-tick {
  font-weight: 600;
  font-size: var(--t-tick);
  font-variant-numeric: tabular-nums;
}
.t-num {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}