/* =============================================================
   AIRFIT — Design Tokens
   Sourced directly from "Charte Graphique AirFit" (PDF, 7 pages)
   ============================================================= */

/* Webfont imports.
   Barlow is loaded LOCALLY from the brand-supplied TTFs in /fonts
   (full 9-weight ladder + italics). Barlow Semi Condensed and
   Roboto Mono are still loaded from Google Fonts — drop their
   zips in /fonts and swap the @import for @font-face rules to
   complete the migration. */

/* ---- Webfonts (all from Google Fonts CDN, deploy-ready) ---- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=Roboto+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------- */
  /* COLOR — Primary AirFit blues                              */
  /* The two dominant colors of the new charter. Use these for */
  /* almost everything that needs color.                       */
  /* ---------------------------------------------------------- */
  --airfit-blue-dark:  #01549d;   /* "Bleu Foncé AirFit"  R001 G084 B157 */
  --airfit-blue-light: #00a6bf;   /* "Bleu Clair AirFit"  R000 G166 B191 */

  /* The signature horizontal gradient. Dark on the LEFT, light on
     the RIGHT — the charter is explicit about the direction. */
  --airfit-gradient: linear-gradient(90deg, var(--airfit-blue-dark) 0%, var(--airfit-blue-light) 100%);
  --airfit-gradient-diag: linear-gradient(135deg, var(--airfit-blue-dark) 0%, var(--airfit-blue-light) 100%);

  /* ---------------------------------------------------------- */
  /* COLOR — Sober secondaries                                 */
  /* "These two are secondary and only meant to give you much  */
  /* more sober colors when you build documents." (PDF p.2)    */
  /* ---------------------------------------------------------- */
  --airfit-ink:        #001231;   /* "Bleu Foncé Sobre" — near-black navy */
  --airfit-mist:       #e5e6e9;   /* "Gris Clair Sobre" — very light grey */

  /* ---------------------------------------------------------- */
  /* COLOR — Equipment family colors (use ONLY for the         */
  /* relevant equipment family; never for generic accents)     */
  /* ---------------------------------------------------------- */
  --family-cross-training:    #01549d;  /* Stations de Cross-Training */
  --family-motricite:         #00a6bf;  /* Ateliers de motricité */
  --family-appareils-guides:  #379b68;  /* Appareils Guidés */
  --family-street-workout:    #c5281c;  /* Modules de Street-Workout */

  /* ---------------------------------------------------------- */
  /* SEMANTIC color tokens                                      */
  /* ---------------------------------------------------------- */
  --bg:           #ffffff;
  --bg-mist:      var(--airfit-mist);
  --bg-ink:       var(--airfit-ink);
  --bg-brand:     var(--airfit-blue-dark);

  --fg:           var(--airfit-ink);
  --fg-muted:     #4a5a73;
  --fg-subtle:    #8693a6;
  --fg-on-brand:  #ffffff;
  --fg-on-mist:   var(--airfit-ink);

  --border:       #d6d9df;
  --border-strong:#aab1bd;
  --divider:      #eef0f3;

  --link:         var(--airfit-blue-dark);
  --link-hover:   var(--airfit-blue-light);

  --accent:       var(--airfit-blue-light);
  --accent-strong:var(--airfit-blue-dark);

  --success:      var(--family-appareils-guides);
  --danger:       var(--family-street-workout);

  /* ---------------------------------------------------------- */
  /* TYPE — Families                                            */
  /* The charter calls for a transition: Gotham → Barlow,       */
  /* DIN Condensed → Barlow Semi Condensed. Roboto Mono is      */
  /* reserved for technical documents.                          */
  /* ---------------------------------------------------------- */
  --font-display: "Barlow", "Helvetica Neue", Arial, sans-serif;          /* replaces Gotham */
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-condensed: "Barlow Semi Condensed", "Barlow", Arial, sans-serif; /* replaces DIN Condensed */
  --font-mono:    "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* TYPE — Weights (Barlow ships the full ladder) */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-extra:   800;
  --w-black:   900;

  /* TYPE — Scale (modular, ~1.25). Barlow runs hot at large
     sizes so display weights are paired with negative tracking
     and italic 800/900 for the most "Airfit" look (the wordmark
     itself is italic black). */
  --fs-display-xl: clamp(56px, 8vw, 112px);
  --fs-display-l:  clamp(40px, 5.5vw, 72px);
  --fs-display-m:  clamp(32px, 4vw, 52px);
  --fs-h1:         clamp(28px, 3.2vw, 40px);
  --fs-h2:         clamp(22px, 2.4vw, 30px);
  --fs-h3:         18px;
  --fs-h4:         16px;
  --fs-eyebrow:    13px;
  --fs-body:       16px;
  --fs-body-l:     18px;
  --fs-small:      14px;
  --fs-caption:    12px;
  --fs-mono:       14px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-cap:    0.12em;

  /* ---------------------------------------------------------- */
  /* SPACING — 4px base                                          */
  /* ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------------------------------------------------------- */
  /* RADIUS — Airfit uses softly rounded surfaces (the rounded  */
  /* square logo lives at ~22% radius) plus full pills.         */
  /* ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- */
  /* SHADOW — Quiet, single-layer. Avoid heavy lifts.           */
  /* ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 18, 49, 0.06), 0 1px 1px rgba(0, 18, 49, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 18, 49, 0.08), 0 2px 4px rgba(0, 18, 49, 0.04);
  --shadow-3: 0 12px 32px rgba(0, 18, 49, 0.12), 0 4px 12px rgba(0, 18, 49, 0.06);
  --shadow-brand: 0 12px 32px rgba(1, 84, 157, 0.28);

  /* ---------------------------------------------------------- */
  /* MOTION                                                     */
  /* ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* Layout */
  --content-max: 1200px;
}

/* =============================================================
   SEMANTIC TYPOGRAPHY — drop-in classes
   ============================================================= */

.h-display-xl,
.h-display-l,
.h-display-m,
h1, .h1,
h2, .h2 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-tight);
  margin: 0;
}

.h-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--w-black);
  font-style: italic;            /* matches the AIRFIT wordmark */
  letter-spacing: var(--tracking-tight);
}
.h-display-l {
  font-size: var(--fs-display-l);
  font-weight: var(--w-extra);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
}
.h-display-m {
  font-size: var(--fs-display-m);
  font-weight: var(--w-extra);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-bold);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--w-semi);
  margin: 0;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-condensed);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cap);
  color: var(--airfit-blue-dark);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0;
}
.p-lead {
  font-size: var(--fs-body-l);
  font-weight: var(--w-regular);
  color: var(--fg);
  line-height: var(--lh-normal);
}
.p-small { font-size: var(--fs-small); color: var(--fg-muted); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-caption); color: var(--fg-subtle); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--w-semi); font-family: var(--font-condensed); }

.condensed {
  font-family: var(--font-condensed);
}

code, .code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg);
}

/* Utility: the signature italic-black wordmark treatment */
.airfit-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
  background: var(--airfit-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Body defaults — opt-in by adding to <body> */
.airfit-doc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}