@layer tokens {
  /* mattemotto: la marca es navy + cyan + naranja calido + hueso. esa es la cuerda. */

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-variable-latin-ext.woff2") format("woff2");
    unicode-range:
      U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
      U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-variable-latin.woff2") format("woff2");
  }

  :root {
    /* — palette · pulled from the legacy ground truth.
       cyan is a panel surface and a data-overlay tint. orange is the wordmark
       and small-mark. ink is the signature dark surface. bone is paper. — */
    --ink:               #001621;          /* legacy navy, exactly */
    --ink-soft:          #0a223e;
    --ink-deep:          #000810;
    --cyan:              #008cba;          /* panel surface — the legacy section bg */
    --cyan-bright:       #00b7de;          /* overlay tint + MÜVE strokes only */
    --cyan-soft:         #4cb1d4;
    --orange:            #fc713e;          /* legacy WARM — wordmark, eyebrows, CTAs */
    --orange-deep:       #fb3011;          /* CTA hover only */
    --bone:              #f4efe6;
    --bone-deep:         #e8e0cf;
    --graphite:          #1d1d1f;

    --hairline-on-bone:  #00162124;
    --hairline-on-cyan:  #00162130;
    --hairline-on-ink:   #f4efe622;

    /* — semantic surfaces — */
    --surface-page:      var(--bone);
    --surface-cyan:      var(--cyan);
    --surface-ink:       var(--ink);
    --surface-bone-deep: var(--bone-deep);

    --on-bone:           var(--ink);
    --on-bone-quiet:     #1d1d1faa;
    --on-cyan:           var(--ink);
    --on-cyan-quiet:     #00162199;
    --on-ink:            var(--bone);
    --on-ink-quiet:      #f4efe690;
    --on-ink-cyan:       var(--cyan-bright);

    /* — type — */
    --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system,
                    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-feat:    "ss01", "cv11", "ss02";

    --fs-mono-100: clamp(0.70rem, 0.66rem + 0.18vw, 0.78rem);
    --fs-mono-200: clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem);
    --fs-mono-300: clamp(0.92rem, 0.86rem + 0.30vw, 1.04rem);
    --fs-100:      clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem);
    --fs-200:      clamp(0.92rem, 0.88rem + 0.22vw, 1.00rem);
    --fs-300:      clamp(1.04rem, 0.98rem + 0.28vw, 1.18rem);
    --fs-400:      clamp(1.18rem, 1.10rem + 0.42vw, 1.36rem);
    --fs-500:      clamp(1.42rem, 1.28rem + 0.70vw, 1.72rem);
    --fs-600:      clamp(1.72rem, 1.50rem + 1.10vw, 2.20rem);
    --fs-700:      clamp(2.20rem, 1.80rem + 2.00vw, 3.10rem);
    --fs-800:      clamp(2.80rem, 2.20rem + 3.00vw, 4.40rem);
    --fs-wordmark: clamp(3.2rem, 6vw, 6.4rem);   /* the orange BikeFit hero word */
    --fs-numeral:  clamp(2.8rem, 5.6vw, 5rem);

    --lh-tight:   1.04;
    --lh-snug:    1.18;
    --lh-normal:  1.45;
    --lh-prose:   1.6;

    --tracking-tight:  -0.024em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-caps:   0.16em;
    --tracking-mono:   0.02em;

    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6.5rem;
    --space-5xl: 9rem;

    --col-count:    12;
    --gutter:       clamp(1rem, 1.6vw, 1.75rem);
    --row-gutter:   clamp(2rem, 3.5vw, 4rem);
    --page-margin:  clamp(1.25rem, 4vw, 4rem);
    --measure:      62ch;
    --max-page:     112rem;

    /* sharp neo-brutalist edges. one pill exception, for tags. */
    --radius-xs:   0;
    --radius-sm:   0;
    --radius-md:   0;
    --radius-lg:   0;
    --radius-pill: 999px;

    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-quint:  cubic-bezier(0.64, 0, 0.78, 0);
    --dur-quick:   140ms;
    --dur-medium:  280ms;
    --dur-long:    520ms;
    --dur-muve:    2200ms;   /* THE wow animation */
  }

  @media (aspect-ratio < 3/4) {
    :root { --col-count: 4; --page-margin: 1rem; --gutter: 0.75rem; }
  }
  @media (3/4 <= aspect-ratio < 1/1) {
    :root { --col-count: 8; --page-margin: 1.5rem; }
  }
  @media (1/1 <= aspect-ratio < 4/3) {
    :root { --col-count: 12; --page-margin: 2rem; }
  }
  @media (4/3 <= aspect-ratio) {
    :root { --col-count: 12; --page-margin: clamp(2rem, 5vw, 5rem); }
  }
}