/* ═══════════════════════════════════════════════════════════
   SUMMIT TRIATHLON COACHING — Design Token System
   Brand Operating System: "Documentary grit meets lab precision"
   
   Rules:
   • 8px baseline grid — all spacing is a multiple of 8
   • 12-column responsive layout, max-width 1200px
   • Approved font stacks only (no raw browser defaults)
   • Radius restricted to token values only
   • Motion: 250-350ms, ease-out default
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── 1. COLOR TOKENS ────────────────────────────────── */

  /* Primary Brand */
  --summit-peak-orange:       #F47A20;
  --summit-neoprene-navy:     #082B45;
  --summit-alpine-white:      #F8F8F6;

  /* Support Neutrals */
  --summit-basalt-charcoal:   #2C2C2C;
  --summit-steel-grey:        #5A6068;
  --summit-mist-grey:         #D4D7DC;
  --summit-warm-sand:         #E8DFD0;

  /* Data / Functional */
  --summit-data-blue:         #3B82C4;
  --summit-success-green:     #3DA67A;
  --summit-alert-red:         #D44B4B;

  /* Semantic Aliases */
  --color-bg-primary:         var(--summit-alpine-white);
  --color-bg-deep:            var(--summit-neoprene-navy);
  --color-bg-card:            var(--summit-alpine-white);
  --color-bg-muted:           color-mix(in srgb, var(--summit-mist-grey) 30%, var(--summit-alpine-white));
  --color-text-primary:       var(--summit-basalt-charcoal);
  --color-text-secondary:     var(--summit-steel-grey);
  --color-text-inverse:       var(--summit-alpine-white);
  --color-text-accent:        var(--summit-peak-orange);
  --color-border:             var(--summit-mist-grey);
  --color-border-subtle:      color-mix(in srgb, var(--summit-mist-grey) 50%, var(--summit-alpine-white));
  --color-accent:             var(--summit-peak-orange);
  --color-accent-hover:       color-mix(in srgb, var(--summit-peak-orange) 85%, black);
  --color-link:               var(--summit-neoprene-navy);
  --color-link-hover:         var(--summit-peak-orange);

  /* ── 2. TYPOGRAPHY TOKENS ───────────────────────────── */

  /* Approved Font Stacks (with robust fallbacks) */
  --font-sans:                'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:               'Merriweather', Georgia, "Times New Roman", serif;

  /* Font Scale — minor third ratio (1.2) from 16px base */
  --text-xs:                  0.694rem;   /* ~11px */
  --text-sm:                  0.833rem;   /* ~13px */
  --text-base:                1rem;       /* 16px  */
  --text-md:                  1.2rem;     /* ~19px */
  --text-lg:                  1.44rem;    /* ~23px */
  --text-xl:                  1.728rem;   /* ~28px */
  --text-2xl:                 2.074rem;   /* ~33px */
  --text-3xl:                 2.488rem;   /* ~40px */
  --text-4xl:                 2.986rem;   /* ~48px */
  --text-5xl:                 3.583rem;   /* ~57px */

  /* Font Weights */
  --weight-regular:           400;
  --weight-medium:            500;
  --weight-semibold:          600;
  --weight-bold:              700;

  /* Line Heights */
  --leading-tight:            1.15;
  --leading-snug:             1.3;
  --leading-normal:           1.5;
  --leading-relaxed:          1.65;

  /* Letter Spacing */
  --tracking-tight:          -0.02em;
  --tracking-normal:          0;
  --tracking-wide:            0.04em;
  --tracking-micro:           0.08em;  /* micro labels, uppercase */

  /* ── 3. SPACING TOKENS (8px grid) ───────────────────── */

  --space-1:                  0.25rem;   /*  4px  — micro */
  --space-2:                  0.5rem;    /*  8px  — base unit */
  --space-3:                  0.75rem;   /* 12px  */
  --space-4:                  1rem;      /* 16px  */
  --space-5:                  1.5rem;    /* 24px  */
  --space-6:                  2rem;      /* 32px  */
  --space-7:                  3rem;      /* 48px  */
  --space-8:                  4rem;      /* 64px  */
  --space-9:                  6rem;      /* 96px  */
  --space-10:                 8rem;      /* 128px */

  /* ── 4. LAYOUT TOKENS ───────────────────────────────── */

  --layout-max-width:         1200px;
  --layout-content-width:     800px;   /* for long-form prose */
  --layout-columns:           12;
  --layout-gutter:            var(--space-5);    /* 24px */
  --layout-margin:            var(--space-5);    /* 24px — page edge */

  /* ── 5. RADIUS TOKENS ───────────────────────────────── */

  --radius-sm:                4px;
  --radius-md:                8px;
  --radius-button:            10px;
  --radius-card:              18px;
  --radius-pill:              999px;
  --radius-round:             50%;

  /* ── 6. SHADOW TOKENS ───────────────────────────────── */

  --shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:                0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:                0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-xl:                0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-card:              0 2px 12px rgba(8, 43, 69, 0.06);
  --shadow-card-hover:        0 6px 24px rgba(8, 43, 69, 0.10);

  /* ── 7. MOTION TOKENS ───────────────────────────────── */

  --motion-fast:              150ms;
  --motion-base:              250ms;
  --motion-slow:              350ms;
  --motion-ease:              cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-ease-out:          cubic-bezier(0, 0, 0.25, 1);
  --motion-ease-in-out:       cubic-bezier(0.42, 0, 0.58, 1);

  /* ── 8. Z-INDEX SCALE ───────────────────────────────── */

  --z-base:                   0;
  --z-dropdown:               100;
  --z-sticky:                 200;
  --z-overlay:                300;
  --z-modal:                  400;
  --z-toast:                  500;

  /* ── 9. OPACITY TOKENS ──────────────────────────────── */

  --opacity-ghost:            0.03;
  --opacity-whisper:          0.05;
  --opacity-hint:             0.10;
  --opacity-subtle:           0.15;
  --opacity-muted:            0.20;
  --opacity-mid:              0.25;
  --opacity-wash:             0.50;
  --opacity-bold:             0.75;
  --opacity-full:             1;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL RESET & TYPOGRAPHY FOUNDATION
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

p {
  max-width: var(--layout-content-width);
}


/* ── HEADINGS ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-3xl);
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

h6 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}


/* ── PROSE / BODY ──────────────────────────────────────── */

p {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  max-width: var(--layout-content-width);
}

.text-secondary {
  color: var(--color-text-secondary);
}


/* ── MICRO LABELS ──────────────────────────────────────── */

.micro-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}


/* ── LINKS ─────────────────────────────────────────────── */

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease);
}

a:hover {
  color: var(--color-link-hover);
}


/* ── LAYOUT UTILITIES ──────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-margin);
  padding-right: var(--layout-margin);
}

.section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.section--compact {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}


/* ── RESPONSIVE GRID ───────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), 1fr);
  gap: var(--layout-gutter);
}

/* Span utilities */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Tablet: collapse to 6-col */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
  }
  .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 {
    grid-column: span 6;
  }
  .section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
}

/* Mobile: collapse to single column */
/* Design Standard §4: "Sectional pacing defines composure" */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 1;
  }
  :root {
    --layout-margin: var(--space-5);
  }
  .section {
    padding-top: var(--space-8);       /* 64px — composure between content blocks */
    padding-bottom: var(--space-7);    /* 56px — asymmetric for forward momentum */
  }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}


/* ── COMPONENT PRIMITIVES ──────────────────────────────── */

.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: box-shadow var(--motion-base) var(--motion-ease);
  /* Cluster alignment: flex-column ensures consistent internal rhythm
     across sibling cards — labels, headings, and body copy align
     when cards share the same heading level and spacing tokens. */
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all var(--motion-base) var(--motion-ease);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.btn--dark {
  background: var(--summit-neoprene-navy);
  color: var(--color-text-inverse);
}

.btn--dark:hover {
  background: #0A3A5C;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}


/* ── DARK SECTION OVERRIDE ─────────────────────────────── */

.section--dark {
  background-color: var(--color-bg-deep);
  color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-text-inverse);
}

.section--dark p {
  color: rgba(248, 248, 246, 0.85);
}

.section--dark .micro-label {
  color: rgba(248, 248, 246, 0.6);
}

.section--dark a {
  color: var(--summit-peak-orange);
}

/* Inline navy-background safety net.
   Many sections use inline style="background: var(--summit-neoprene-navy)"
   instead of .section--dark class. This catches those and forces inverse text. */
[style*="background: var(--summit-neoprene-navy)"] h1,
[style*="background: var(--summit-neoprene-navy)"] h2,
[style*="background: var(--summit-neoprene-navy)"] h3,
[style*="background: var(--summit-neoprene-navy)"] h4,
[style*="background: var(--summit-neoprene-navy)"] h5,
[style*="background: var(--summit-neoprene-navy)"] h6 {
  color: var(--color-text-inverse) !important;
}

[style*="background: var(--summit-neoprene-navy)"] p {
  color: rgba(248, 248, 246, 0.85) !important;
}

[style*="background: var(--summit-neoprene-navy)"] .micro-label {
  color: rgba(248, 248, 246, 0.6) !important;
}

[style*="background: var(--color-bg-deep)"] h1,
[style*="background: var(--color-bg-deep)"] h2,
[style*="background: var(--color-bg-deep)"] h3,
[style*="background: var(--color-bg-deep)"] h4,
[style*="background: var(--color-bg-deep)"] h5,
[style*="background: var(--color-bg-deep)"] h6 {
  color: var(--color-text-inverse) !important;
}

[style*="background: var(--color-bg-deep)"] p {
  color: rgba(248, 248, 246, 0.85) !important;
}



/* ── SELECTION & FOCUS ─────────────────────────────────── */

::selection {
  background: var(--summit-peak-orange);
  color: var(--color-text-inverse);
}

:focus-visible {
  outline: 2px solid var(--summit-peak-orange);
  outline-offset: 2px;
}


/* ── IMAGES ────────────────────────────────────────────── */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.img--natural {
  /* Image treatment rule: natural, restrained, tonally coherent.
     No over-saturation, no faux-cinematic contrast, no fake HDR. */
  filter: none;
  object-fit: cover;
}