/* ============================================================
   Fire Breathing Blowfish — Typography
   Display: "Giant Head" — the team's signature chunky, rounded,
     retro-groovy face. Its counters close up, so at display
     sizes it is ALWAYS given an OUTLINE STROKE (see --display-
     stroke-* + the .fbbf-outline / outlineText() helpers) which
     defines every letter edge and makes it read cleanly — this
     is the brand's signature look (see the logo lockup). Set
     lowercase for calm moments, ALL-CAPS for the battle cry.
     Tracked +0.06em (--ls-display).
   Text: "Fredoka" — rounded, legible companion for all UI + body
     copy and anything at smaller sizes.
   Mono: race times, splits, tabular data.
   ============================================================ */

:root {
  /* Families */
  --font-display:  "Giant Head", "Giant Head Two", system-ui, sans-serif;
  --font-spirit:   "Giant Head", "Giant Head Two", system-ui, sans-serif;
  --font-display-alt: "Giant Head Two", "Giant Head", system-ui, sans-serif;
  --font-text:     "Fredoka", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   Roboto, Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — display leans huge & loud */
  --fs-display-xl: 5.5rem;    /* 88px hero wordmark        */
  --fs-display-lg: 4rem;      /* 64px section hero         */
  --fs-display-md: 2.75rem;   /* 44px                      */
  --fs-display-sm: 2rem;      /* 32px                      */

  --fs-heading-lg: 1.75rem;   /* 28px                      */
  --fs-heading-md: 1.375rem;  /* 22px                      */
  --fs-heading-sm: 1.125rem;  /* 18px                      */

  --fs-body-lg:    1.125rem;  /* 18px                      */
  --fs-body:       1rem;      /* 16px                      */
  --fs-body-sm:    0.875rem;  /* 14px                      */
  --fs-caption:    0.75rem;   /* 12px                      */

  /* Line heights */
  --lh-display: 0.92;   /* @kind other */
  --lh-heading: 1.1;    /* @kind other */
  --lh-body:    1.55;   /* @kind other */

  /* Weights (text face) */
  --fw-regular: 400;    /* @kind other */
  --fw-medium:  500;    /* @kind other */
  --fw-semibold: 600;   /* @kind other */
  --fw-bold:    700;    /* @kind other */

  /* Letter spacing */
  --ls-display:   0.06em;   /* @kind other */
  --ls-tight:    -0.01em;   /* @kind other */
  --ls-caps:      0.14em;   /* @kind other */
  --ls-normal:    0;        /* @kind other */

  /* Display outline stroke — the signature legibility treatment for
     Giant Head. Expressed in em so the outline stays proportional to
     the letters at every size, matching the logo lockup (~0.1em). */
  --display-stroke-color: var(--fbbf-navy);   /* @kind color */
  --display-stroke-width: 0.07em;             /* @kind other */
  --display-fill:         #ffffff;            /* @kind color */
}

/* Utility: outlined display text (white fill, navy stroke).
   Apply to Giant Head at display sizes for the brand look. */
.fbbf-outline {
  font-family: var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--display-fill);
  -webkit-text-stroke: var(--display-stroke-width) var(--display-stroke-color);
  paint-order: stroke fill;
}
/* Inverse: navy fill, white stroke (for light backgrounds). */
.fbbf-outline-inv {
  font-family: var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--fbbf-navy);
  -webkit-text-stroke: var(--display-stroke-width) #ffffff;
  paint-order: stroke fill;
}