/* ============================================================
   MastersFit site — Design System bridge
   ------------------------------------------------------------
   The site consumes the canonical MastersFit Design System
   (design-system/styles.css — your exported version). This file:
     1. imports that system (tokens: fonts, colors, type, spacing),
     2. imports the shared component classes (.mf-btn, .mf-card, …),
     3. maps the DS's token names onto the names the site's CSS
        already uses, and fills a few tokens the DS doesn't ship
        (motion, --weight-extrabold, display tracking).
   Result: the site renders entirely from your design system,
   and stays in sync if you update it.
   ============================================================ */

@import url("design-system/styles.css");
@import url("components/mf-components.css");

:root {
  /* ---- renamed semantics → site aliases ---- */
  --primary: var(--brand-primary);
  --secondary: var(--brand-secondary);
  --on-primary: var(--content-on-primary);
  --bg: var(--background);
  /* --surface, --text-primary/secondary/muted keep the same names */

  --n-light-1: var(--neutral-light-1);
  --n-light-2: var(--neutral-light-2);
  --n-medium-1: var(--neutral-medium-1);
  --n-medium-2: var(--neutral-medium-2);
  --n-medium-3: var(--neutral-medium-3);
  --n-medium-4: var(--neutral-medium-4);
  --n-dark-1: var(--neutral-dark-1);

  --b-light-1: var(--brand-light-1);
  --b-light-2: var(--brand-light-2);
  --b-medium-1: var(--brand-medium-1);
  --b-medium-2: var(--brand-medium-2);
  --b-dark-0: var(--brand-dark-0);
  --b-dark-1: var(--brand-dark-1);
  --b-dark-2: var(--brand-dark-2);
  --b-dark-3: var(--brand-dark-3);

  /* ---- borders as COLORS ----
     The DS exposes --border-subtle as a 1px-solid shorthand; the
     site uses --border / --border-subtle as color values, so we
     override them here (this rule wins, loaded after the import). */
  --border: var(--neutral-medium-1);
  --border-subtle: var(--neutral-light-2);

  /* ---- tokens the DS doesn't ship but the site uses ---- */
  --weight-extrabold: 800;
  --tracking-snug: -0.01em;
  --tracking-caps: 0.12em;

  /* ---- motion (DS omits; mirrors the app's TouchableOpacity feel) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
}