/* =============================================================================
   FitnessFinder — DESIGN TOKENS
   -----------------------------------------------------------------------------
   The single source of truth for the site's look, loaded by every page before
   any other stylesheet.

   Every colour below is a value that was already hardcoded across the old
   stylesheets — nothing has been recoloured. What changed is that rules now
   point at a token instead of a literal, so the whole site can be retuned from
   this one block.

   Typography and shape ARE new: a condensed uppercase display face (Anton) for
   headings, a geometric sans (Outfit) for body copy, and a mono face for the
   small tracked-out labels above section headings.
   ========================================================================== */
:root {
  /* --- Brand ------------------------------------------------------------ */
  --ff-brand:          #00c2ee;   /* primary cyan */
  --ff-brand-light:    #00cffb;   /* the slightly brighter fill used on CTAs */
  --ff-brand-hover:    #00a8d9;
  --ff-brand-deep:     #0099bb;
  --ff-brand-tint:     #edfaff;   /* pale cyan wash behind eyebrows/pills */
  --ff-brand-tint-2:   #f0fbff;
  --ff-brand-soft:     #b3eeff;
  --ff-brand-a10:      rgba(0, 194, 238, 0.10);
  --ff-brand-a18:      rgba(0, 194, 238, 0.18);
  --ff-brand-a28:      rgba(0, 194, 238, 0.28);
  --ff-brand-a40:      rgba(0, 194, 238, 0.40);

  /* --- Ink & text ------------------------------------------------------- */
  --ff-ink:            #1f1f1f;   /* headings, primary text */
  --ff-ink-deep:       #1a1a2e;
  --ff-text:           #1f1f1f;
  --ff-muted:          #555;
  --ff-muted-2:        #666;
  --ff-muted-3:        #888;
  --ff-muted-4:        #aaa;
  --ff-muted-5:        #bbb;
  --ff-on-brand:       #ffffff;   /* text sitting on a brand fill */

  /* --- Surfaces --------------------------------------------------------- */
  --ff-surface:        #ffffff;
  --ff-surface-2:      #f8f9fb;
  --ff-surface-3:      #f4f6f9;
  /* The page's original top-to-bottom wash, kept exactly as it was. */
  --ff-page-bg:        linear-gradient(to bottom, #ffffff, #f4f6f9);

  /* --- Lines ------------------------------------------------------------ */
  --ff-line:           #e8e8e8;
  --ff-line-soft:      #edf0f2;
  --ff-line-strong:    #e0e0e0;
  --ff-line-field:     #e6e9ec;
  --ff-line-faint:     #f0f0f0;

  /* --- Status ----------------------------------------------------------- */
  --ff-danger:         #e74c3c;
  --ff-danger-2:       #dc2626;
  --ff-success:        #27ae60;
  --ff-success-2:      #22c55e;
  --ff-success-3:      #16a34a;
  --ff-warn:           #f59e0b;
  --ff-warn-soft:      #fde68a;
  --ff-warn-deep:      #b45309;
  --ff-accent-purple:  #8b5cf6;

  /* --- Type ------------------------------------------------------------- */
  --ff-font-body:      'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-font-display:   'Anton', 'Arial Narrow', sans-serif; /* condensed, uppercase */
  --ff-font-mono:      'JetBrains Mono', ui-monospace, monospace;
  /* Montserrat is loaded for the header lockup only — the tagline that sits
     beside the logo. Deliberately not used anywhere else in the type system. */
  --ff-font-tagline:   'Montserrat', 'Outfit', system-ui, sans-serif;

  /* Display headings run uppercase with a hair of tracking. Anton is a
     single-weight face, so weight is always 400 and size does the work. */
  --ff-display-tt:     uppercase;
  --ff-display-ls:     0.015em;
  --ff-display-fw:     400;

  /* Micro-labels: mono, uppercase, widely tracked. */
  --ff-label-fs:       0.68rem;
  --ff-label-ls:       0.14em;

  /* --- Shape ------------------------------------------------------------ */
  --ff-r-pill:         999px;
  --ff-r-card:         14px;
  --ff-r-card-lg:      20px;
  --ff-r-tile:         11px;
  --ff-r-input:        12px;

  /* --- Elevation --------------------------------------------------------
     Tighter and cooler than the old flat rgba(0,0,0,.1) drops. */
  --ff-shadow-xs:      0 1px 2px rgba(16, 24, 40, 0.04);
  --ff-shadow-sm:      0 2px 10px rgba(16, 24, 40, 0.06);
  --ff-shadow-md:      0 6px 24px rgba(16, 24, 40, 0.08);
  --ff-shadow-lg:      0 16px 48px rgba(16, 24, 40, 0.12);
  --ff-shadow-brand:   0 4px 16px rgba(0, 194, 238, 0.28);

  /* --- Motion ----------------------------------------------------------- */
  --ff-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ff-t-fast:         0.14s var(--ff-ease);
  --ff-t:              0.2s var(--ff-ease);
}

/* =============================================================================
   BASE TYPE
   Headings switch to the condensed uppercase face. Anything that needs to stay
   sentence-case (long prose headings, legal copy, form legends) opts out with
   .u-plain, which returns it to the body face.
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-display-fw);
  text-transform: var(--ff-display-tt);
  letter-spacing: var(--ff-display-ls);
  line-height: 1.08;
  color: var(--ff-ink);
}
h5, h6 {
  font-family: var(--ff-font-body);
  font-weight: 700;
  color: var(--ff-ink);
}

/* Opt-out: body face, normal casing. Used for long-form and legal pages. */
.u-plain,
h1.u-plain, h2.u-plain, h3.u-plain, h4.u-plain {
  font-family: var(--ff-font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Mono micro-label — the "eyebrow" that sits above a section heading. */
.u-label {
  display: inline-block;
  font-family: var(--ff-font-mono);
  font-size: var(--ff-label-fs);
  font-weight: 600;
  letter-spacing: var(--ff-label-ls);
  text-transform: uppercase;
  color: var(--ff-brand-deep);
}

/* Form controls inherit the body face rather than the browser default. */
input, textarea, select, button {
  font-family: var(--ff-font-body);
}

/* Anton ships a single weight. Without this, any leftover `font-weight: 700`
   on a display heading makes the browser fake a bold and the letterforms smear.
   Outfit and JetBrains Mono load real weights, so nothing else is affected.

   `style` is deliberately still permitted: none of these families ship an
   italic file, so forbidding style synthesis too would silently render every
   <em> and italic caption upright. */
* {
  font-synthesis: style;
  font-synthesis-weight: none;
}

/* In-page jumps glide rather than snap. The reduced-motion block below turns
   this back to `auto`, so anyone who has asked for less movement still gets an
   instant jump. */
html { scroll-behavior: smooth; }

/* Consistent focus ring everywhere, replacing the browser default outline. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ff-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}