/* ============================================================================
   KÜTEMEIER PERSONAL TRAINING — Design Foundations
   Colors + Typography tokens for a fresh, clean, health-forward brand.
   Aesthetic: clinical-clean & trustworthy, on a light paper base, anchored by a
   deep forest "ink" and energized by a volt-lime accent.
   Load this file first, then the page styles.
   Fonts are loaded from Google Fonts (see <link> in each HTML file):
     Space Grotesk (display) · Hanken Grotesk (body) · Space Mono (labels/data)
   ============================================================================ */

:root {
  /* ----- BRAND CORE -------------------------------------------------------- */
  --volt:        #C8FF2D;   /* primary accent — CTAs, energy, highlights      */
  --volt-deep:   #A9E000;   /* pressed/hover on light, accent text on dark    */
  --volt-soft:   #EEFFBE;   /* tint — subtle highlight fills                  */

  --ink:         #16221F;   /* primary dark — headlines, footer, hero bg      */
  --ink-2:       #1E2E2A;   /* raised dark surface                            */
  --ink-3:       #2A3D38;   /* dark borders / hover on dark                   */

  /* ----- NEUTRALS (light side) -------------------------------------------- */
  --paper:       #F6F8F3;   /* page background — warm, calm, clinical         */
  --white:       #FFFFFF;   /* cards / elevated surfaces                      */
  --mist:        #ECF1E8;   /* alt section background (sage-tinted)           */
  --mist-2:      #E2EADD;   /* deeper sage panel                              */

  --line:        #DEE5D9;   /* hairline borders on light                      */
  --line-strong: #C8D1C2;   /* stronger dividers                              */

  /* ----- TEXT -------------------------------------------------------------- */
  --fg1:         #16221F;   /* primary text on light                          */
  --fg2:         #45524D;   /* secondary text / body on light                 */
  --fg3:         #6F7C76;   /* muted captions, meta                           */
  --fg-on-ink:   #F3F7EF;   /* primary text on ink                            */
  --fg-on-ink-2: #A9B7B0;   /* secondary text on ink                          */

  /* ----- SEMANTIC ---------------------------------------------------------- */
  --success:     #1F8A5B;
  --success-bg:  #E2F3EA;
  --warning:     #C9871F;
  --warning-bg:  #FBF0DC;
  --error:       #C0392B;
  --error-bg:    #FBE7E4;
  --info:        #2A6FDB;
  --info-bg:     #E5EEFB;

  /* ----- TYPE FAMILIES ----------------------------------------------------- */
  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- TYPE SCALE (fluid where useful) ----------------------------------- */
  --t-display:  clamp(2.75rem, 6vw, 5rem);    /* hero headline   ~44–80px     */
  --t-h1:       clamp(2.25rem, 4vw, 3.25rem); /* page title      ~36–52px     */
  --t-h2:       clamp(1.75rem, 2.6vw, 2.5rem);/* section title   ~28–40px     */
  --t-h3:       1.5rem;                        /* 24px                        */
  --t-h4:       1.25rem;                       /* 20px                        */
  --t-lead:     clamp(1.125rem, 1.4vw, 1.375rem); /* intro paragraph          */
  --t-body:     1.0625rem;                     /* 17px base                   */
  --t-sm:       0.9375rem;                     /* 15px                        */
  --t-xs:       0.8125rem;                     /* 13px                        */
  --t-eyebrow:  0.75rem;                       /* 12px mono label             */

  /* ----- WEIGHTS ----------------------------------------------------------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ----- RADII ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ----- SPACING (8px base) ------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ----- ELEVATION --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(22, 34, 31, 0.06);
  --shadow-sm: 0 2px 8px rgba(22, 34, 31, 0.07);
  --shadow-md: 0 8px 24px rgba(22, 34, 31, 0.09);
  --shadow-lg: 0 20px 48px rgba(22, 34, 31, 0.12);
  --shadow-volt: 0 10px 30px rgba(169, 224, 0, 0.35);

  /* ----- MOTION ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ----- LAYOUT ------------------------------------------------------------ */
  --maxw: 1200px;
  --maxw-prose: 680px;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY — apply directly or copy into component styles
   ============================================================================ */

.h-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-regular);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--volt-deep);
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--fg1);
  text-wrap: balance;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--w-bold);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg1);
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: 1.25;
  color: var(--fg1);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-regular);
  line-height: 1.5;
  color: var(--fg2);
  text-wrap: pretty;
}

.p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.65;
  color: var(--fg2);
  text-wrap: pretty;
}

.small {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fg2);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--fg3);
}

/* Stat / metric number — uses display face, tight */
.stat-num {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}