/* =========================================================
   Wholesome Fitness, Colors & Type Tokens
   ========================================================= */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (canonical) ---------- */
  --wf-black:       #000000;
  --wf-blue:        #06438D;   /* primary brand */
  --wf-gray:        #C5CED6;   /* brand neutral */
  --wf-white:       #FFFFFF;

  /* ---------- Extended scale (derived) ---------- */
  --wf-blue-900:    #03244C;
  --wf-blue-800:    #04335E;
  --wf-blue-700:    #053B73;
  --wf-blue-600:    #06438D;   /* = brand */
  --wf-blue-500:    #1357A9;
  --wf-blue-400:    #3B7AC4;
  --wf-blue-300:    #7AA5DA;
  --wf-blue-200:    #B5CCEB;
  --wf-blue-100:    #DCE7F5;
  --wf-blue-050:    #EEF3FB;

  --wf-gray-900:    #1A1F24;
  --wf-gray-800:    #2D343B;
  --wf-gray-700:    #4B545E;
  --wf-gray-600:    #6A7480;
  --wf-gray-500:    #8A95A1;
  --wf-gray-400:    #A6B0BB;
  --wf-gray-300:    #C5CED6;   /* = brand gray */
  --wf-gray-200:    #DCE2E8;
  --wf-gray-100:    #EBEFF3;
  --wf-gray-050:    #F5F7F9;

  /* ---------- Semantic surfaces ---------- */
  --bg:             var(--wf-white);
  --bg-muted:       var(--wf-gray-050);
  --bg-subtle:      var(--wf-gray-100);
  --bg-inverse:     var(--wf-black);
  --bg-brand:       var(--wf-blue);
  --bg-brand-soft:  var(--wf-blue-050);

  /* ---------- Semantic foreground ---------- */
  --fg-1:           var(--wf-black);        /* primary text */
  --fg-2:           var(--wf-gray-700);     /* secondary text */
  --fg-3:           var(--wf-gray-500);     /* tertiary / captions */
  --fg-on-brand:    var(--wf-white);
  --fg-on-inverse:  var(--wf-white);
  --fg-brand:       var(--wf-blue);
  --fg-link:        var(--wf-blue);
  --fg-link-hover:  var(--wf-blue-700);

  /* ---------- Borders & dividers ---------- */
  --border-subtle:  var(--wf-gray-200);
  --border-default: var(--wf-gray-300);
  --border-strong:  var(--wf-gray-700);
  --border-brand:   var(--wf-blue);

  /* ---------- Functional ---------- */
  --success:        #1F7A3A;
  --warning:        #B86E00;
  --danger:         #B3261E;
  --info:           var(--wf-blue);

  /* ---------- Typography ---------- */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale (modular ~1.20) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* Weights, Open Sans is used at Bold for headings and brand voice */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing, Open Sans Bold reads best with a slight negative track at display sizes */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii, restrained, athletic, mostly square ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(6, 67, 141, 0.10), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 16px 32px rgba(6, 67, 141, 0.14), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-focus: 0 0 0 3px rgba(6, 67, 141, 0.30);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;
}

/* =========================================================
   Element-level defaults, semantic styles
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-60);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
h4 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
h5 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
}
h6 {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

p {
  margin: 0 0 var(--sp-4);
  color: var(--fg-1);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Eyebrow, very common in athletic / fitness branding */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Display, for hero callouts. Bold italic = brand "in motion" voice */