/* ============================================================================
   FPT — Freestyle Pro Tour · Brand design tokens (from FPT-Brand-Guide-2025)
   Single source of truth for ALL FPT web work. Import this; use the variables.
   "keep it simple" — clean, sporty, white/black/blue with a yellow accent.
   ============================================================================ */
/* fonts: self-hosted since 2026-11-08 (no Google request, see fpt-fonts.css) */
@import url('fpt-fonts.css');

:root{
  /* --- Core palette (exact brand hexes) --- */
  --fpt-blue:   #2191d2;   /* main blue   · rgb 33 144 210 · cmyk 75 23 0 0 */
  --fpt-yellow: #fce81e;   /* sec. yellow · rgb 252 231 36 */
  --fpt-black:  #19171a;   /* sec. black  · rgb 25 23 26 */
  --fpt-white:  #ffffff;

  /* --- Derived tints/shades (kept on-brand; use sparingly) --- */
  --fpt-blue-700:#1a76ad;  --fpt-blue-300:#7ec3e8;  --fpt-blue-100:#e3f1fb;
  --fpt-ink:     #19171a;   --fpt-ink-2:#43474d;     --fpt-muted:#6b7280;
  --fpt-line:    #e4e7eb;   --fpt-paper:#ffffff;     --fpt-paper-2:#f6f8fa;
  --fpt-black-2: #221f24;   /* slightly lifted black for cards on dark */

  /* --- The "secondary fade": main blue -> secondary yellow --- */
  --fpt-fade: linear-gradient(100deg,var(--fpt-blue) 0%, #6fc36b 55%, var(--fpt-yellow) 100%);
  --fpt-fade-soft: linear-gradient(100deg,#2191d2 0%, #fce81e 140%);

  /* --- Type --- */
  --fpt-head:'Poppins',-apple-system,Segoe UI,sans-serif;   /* headlines: 700/800 */
  --fpt-body:'Roboto',-apple-system,Segoe UI,sans-serif;    /* sub/text: 300/400/500 */

  /* --- Scale / shape (simple, consistent) --- */
  /* corners — tightened 2026-06-26. REVERT to the original rounded look instantly with
     <html data-corners="round"> (old values: sm 8 / r 12 / lg 18). */
  --fpt-r-sm:3px; --fpt-r:5px; --fpt-r-lg:9px; --fpt-r-pill:999px;
  --fpt-s-1:4px; --fpt-s-2:8px; --fpt-s-3:12px; --fpt-s-4:16px; --fpt-s-5:24px; --fpt-s-6:32px; --fpt-s-8:48px;
  --fpt-shadow:0 10px 30px -16px rgba(25,23,26,.35);
  --fpt-shadow-blue:0 10px 30px -14px rgba(33,144,210,.45);
}
/* one-line revert to the previous rounded look: add data-corners="round" to <html> */
:root[data-corners="round"]{ --fpt-r-sm:8px; --fpt-r:12px; --fpt-r-lg:18px; }

/* Headlines = Poppins bold; sub/body = Roboto (medium/light/regular) */
.fpt-h1,.fpt-h2,.fpt-h3,h1.fpt,h2.fpt,h3.fpt{font-family:var(--fpt-head);font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--fpt-ink)}
.fpt-h1{font-size:clamp(32px,5vw,56px)}
.fpt-h2{font-size:clamp(24px,3.2vw,36px)}
.fpt-h3{font-size:clamp(18px,2.2vw,22px)}
.fpt-sub1{font-family:var(--fpt-body);font-weight:500}   /* Roboto medium */
.fpt-sub2{font-family:var(--fpt-body);font-weight:300}   /* Roboto light  */
.fpt-text{font-family:var(--fpt-body);font-weight:400}   /* Roboto regular*/
.fpt-eyebrow{font-family:var(--fpt-head);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--fpt-blue)}

/* Buttons — simple, sporty, pill or slight-radius */
.fpt-btn{font-family:var(--fpt-head);font-weight:700;border:0;border-radius:var(--fpt-r-pill);padding:11px 20px;cursor:pointer;font-size:14px;display:inline-flex;gap:8px;align-items:center;transition:filter .15s,transform .15s}
.fpt-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.fpt-btn--blue{background:var(--fpt-blue);color:#fff}
.fpt-btn--yellow{background:var(--fpt-yellow);color:var(--fpt-black)}
.fpt-btn--ghost{background:transparent;border:2px solid var(--fpt-blue);color:var(--fpt-blue)}
.fpt-btn--dark{background:var(--fpt-black);color:#fff}

/* Brand design elements (overlay on images / create structure) */
.fpt-dotgrid{background-image:radial-gradient(var(--fpt-ink) 1.3px,transparent 1.3px);background-size:16px 16px}
.fpt-dotgrid--blue{background-image:radial-gradient(var(--fpt-blue) 1.3px,transparent 1.3px);background-size:16px 16px}
.fpt-hatch{background:repeating-linear-gradient(115deg,var(--fpt-black) 0 6px,transparent 6px 16px)}
.fpt-hatch--yellow{background:repeating-linear-gradient(115deg,var(--fpt-yellow) 0 6px,transparent 6px 16px)}
.fpt-fade-bar{height:6px;background:var(--fpt-fade)}
/* torn-paper edge: apply as a mask/clip on section dividers (use an SVG/PNG from _brand if needed) */

/* Surfaces */
.fpt-card{background:#fff;border:1px solid var(--fpt-line);border-radius:var(--fpt-r-lg);box-shadow:var(--fpt-shadow)}
.fpt-on-dark{background:var(--fpt-black);color:#fff}
.fpt-chip{font-family:var(--fpt-body);font-weight:500;font-size:12px;border-radius:var(--fpt-r-pill);padding:4px 10px;background:var(--fpt-blue-100);color:var(--fpt-blue-700)}

/* ── Name-overflow safety (sitewide) ────────────────────────────────────────────────
   Athlete/competitor names vary wildly in length ("Bo" … "Maaike Huvermann"). A name must
   NEVER cross its container in any view (desktop, mobile web, PWA, CMS). Two tools:
   • .fpt-name   — WRAPPING contexts (cards, profile headers, podiums): the name wraps to a
                   second line and, as a last resort, breaks a too-long single token.
   • .fpt-name-1 — SINGLE-LINE contexts (dense table rows, pills): the name stays on one line
                   and ellipsises; pair with title="<full name>" so the full value is on hover.
   BOTH set min-width:0 so the element can shrink inside a flex/grid parent — the usual cause of
   overflow (flex/grid children default to min-width:auto and refuse to shrink below content).
   NOTE: a wrapping/ellipsising child inside a FLEX row also needs min-width:0 on its flex
   ANCESTORS up to the row; add .fpt-name to the shrinkable ancestor too, or set min-width:0 there. */
.fpt-name{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.fpt-name-1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/*
  USAGE NOTES (from the guide):
  • Logo lockups + icon: _brand/ (fpt-logo.png in public/assets/img/theme/). EFPT = Europe-map icon,
    AFPT = Americas-map icon, plain FPT = generic fin/wave icon. Colour combos: blue/black/white on
    white or black. Keep clear space; don't recolour outside the palette.
  • Imagery: real on-water action, torn-paper transitions, dot-grid + diagonal-hatch + blue/yellow ink
    swirl accents to "create structure, overlay on images." Yellow is an ACCENT only (sparingly).
  • Tone: "keep it simple." White space, clear hierarchy, Poppins headline + Roboto everything else.
*/