/* ===========================================================================
   MFO design tokens — the single source of truth for color, geometry,
   motion, and type. No other stylesheet may contain a raw hex, radius,
   duration, or easing value.

   Layer 1 (--mfo-*) holds brand primitives taken from the myfitnessoutlet.com
   storefront. Layer 2 maps those primitives onto the Material for MkDocs
   variables the theme actually reads.

   Contrast ratios in comments are computed, not estimated, and are verified
   by tools/check_contrast.py. The site ships a light scheme only.
   =========================================================================== */

:root {
  /* --- Brand orange ramp -------------------------------------------------
     500 is the storefront accent. 700 is the darkened step that clears AA
     for text on white, kept available for any surface that needs it. */
  --mfo-orange-300: #FF9C6B;           /* ink on this: 9.12:1 */
  --mfo-orange-400: #FF6A26;           /* ink on this: 6.55:1 — button hover */
  --mfo-orange-500: #FF580D;           /* brand accent; ink on this: 5.94:1 */
  --mfo-orange-700: #C2410C;           /* on white: 5.18:1 — AA-safe as text */
  --mfo-orange-900: #9A3412;           /* on white: 7.31:1 */
  --mfo-orange-tint: #FFF8F5;          /* callout / badge fill */

  /* --- Neutrals ---------------------------------------------------------- */
  --mfo-ink: #121212;                  /* on white: 18.73:1 */
  --mfo-ink-deep: #000113;             /* header + footer surface */
  --mfo-surface: #F8F9FA;
  --mfo-muted: #5B5B5B;                /* on white: 6.79:1 */
  --mfo-disabled: #9A9A9A;
  --mfo-border: #AEB9C5;               /* decorative dividers only — 1.99:1 */

  /* --- Semantic status ---------------------------------------------------
     success is an accent/border color only: 2.79:1 on white fails AA as text. */
  --mfo-success: #55AF10;
  --mfo-positive: #157631;             /* on white: 5.73:1 */
  --mfo-info: #074B7C;                 /* on white: 9.10:1 */
  --mfo-info-surface: #ECF5FC;
  --mfo-info-border: #D1E0F1;

  /* --- Geometry (storefront values) -------------------------------------- */
  --mfo-radius-button: 2px;
  --mfo-radius-panel: 4px;
  --mfo-radius-media: 8px;
  --mfo-radius-pill: 40px;
  --mfo-border-width: 1px;
  --mfo-tap-target: 44px;
  --mfo-tap-target-sm: 24px;
  --mfo-gutter-mobile: 20px;
  --mfo-grid-gap: 16px;
  --mfo-content-max: 76rem;

  /* --- Motion ------------------------------------------------------------
     Docs motion stays in the 0.1s–0.3s band; anything longer on a
     navigation path reads as lag. */
  --mfo-duration-short: 0.1s;
  --mfo-duration-default: 0.2s;
  --mfo-duration-medium: 0.3s;
  --mfo-duration-none: 0.01ms;         /* reduced-motion neutralizer */
  --mfo-ease-out-slow: cubic-bezier(0.3, 0.62, 0.45, 1);
  --mfo-ease-wipe: cubic-bezier(0.645, 0.045, 0.355, 1);
  --mfo-ease-slide-in: cubic-bezier(0.4, 0, 0.6, 1);

  /* --- Type -------------------------------------------------------------- */
  --mfo-weight-body: 400;
  --mfo-weight-bold: 700;
  --mfo-tracking-body: 0.001em;
  --mfo-tracking-heading: -0.029em;
  --mfo-tracking-button: -0.015em;

  /* --- Focus -------------------------------------------------------------
     3.16:1 against white and 6.56:1 against the dark header — both clear the
     3:1 non-text minimum. */
  --mfo-focus-color: var(--mfo-orange-500);
  --mfo-focus-width: 3px;
  --mfo-focus-offset: 3px;
}

/* ===========================================================================
   Layer 2 — map brand primitives onto Material's variables.
   Light scheme only; the site ships no dark scheme.
   =========================================================================== */

[data-md-color-scheme="default"] {
  /* Body text uses brand ink rather than Material's rgba(0,0,0,.87). */
  --md-default-fg-color: var(--mfo-ink);

  /* Link color. NOTE: #FF580D on white is 3.16:1, which does not meet the
     WCAG AA 4.5:1 minimum for body-size text. This is a deliberate,
     owner-approved brand decision. It is mitigated by underlining links in
     prose so color is never the sole means of identifying them (WCAG 1.4.1),
     and it is recorded as an explicit exception in tools/check_contrast.py.
     Use --mfo-orange-700 (5.18:1) anywhere an AA-compliant orange is needed. */
  --md-typeset-a-color: var(--mfo-orange-500);

  --md-accent-fg-color: var(--mfo-orange-500);
  --md-accent-fg-color--transparent: rgba(255, 88, 13, 0.12);

  /* Footer credit text: #ffffff8a over --mfo-ink-deep = 6.05:1.
     Material's stock #ffffff73 computes to 4.46:1 and fails AA. */
  --md-footer-fg-color--lighter: #ffffff8a;
}