/* ============================================================
   MOMENTOUS SPORTS — DESIGN TOKENS
   Derived from: PPTX marketing template + investor deck + logos
   ============================================================ */

:root {
  /* ---- CORE PALETTE ---- */
  --ms-navy-900:   #0E2546;   /* deepest — used in logo shadow, deep charts */
  --ms-navy-800:   #1F3B6B;   /* primary navy — logo, headings, chart bars */
  --ms-navy-700:   #2A4A82;   /* mid navy */
  --ms-navy-600:   #3A5FA0;   /* hover states */

  --ms-cyan-600:   #0BA6DC;   /* hyperlink / accent — the "Here" blue */
  --ms-cyan-500:   #1FB6EB;   /* primary cyan accent (deck title accent) */
  --ms-cyan-400:   #3EC7F5;
  --ms-cyan-300:   #7BD7F7;   /* pale sky — investor stat tiles */
  --ms-cyan-200:   #BFE7F7;
  --ms-cyan-100:   #E6F4FB;

  --ms-yellow:     #F4C43C;   /* chart accent only (deck graphs) */
  --ms-red:        #C2453B;   /* chart negative / alert */
  --ms-green:      #3E9D6B;   /* chart positive / success */

  /* ---- NEUTRALS ---- */
  --ms-ink:        #0E1A2C;   /* body copy darkest */
  --ms-graphite:   #4A5568;   /* body copy secondary */
  --ms-slate:      #6B7A90;   /* captions, meta */
  --ms-mist:       #9AA6B8;   /* disabled, hairlines */
  --ms-fog:        #D9DEE6;   /* chart bar muted, dividers */
  --ms-cloud:      #EDF0F5;   /* card backgrounds */
  --ms-whisper:    #F6F8FB;   /* subtle section bg */
  --ms-paper:      #FFFFFF;

  /* ---- SEMANTIC ---- */
  --ms-bg:          var(--ms-paper);
  --ms-bg-alt:      var(--ms-whisper);
  --ms-surface:     var(--ms-paper);
  --ms-surface-alt: var(--ms-cloud);
  --ms-border:      #E4E8F0;
  --ms-border-strong: var(--ms-fog);

  --ms-text:        var(--ms-ink);
  --ms-text-muted:  var(--ms-graphite);
  --ms-text-faint:  var(--ms-slate);
  --ms-text-invert: var(--ms-paper);

  --ms-brand:       var(--ms-navy-800);
  --ms-brand-ink:   var(--ms-navy-900);
  --ms-accent:      var(--ms-cyan-500);
  --ms-link:        var(--ms-cyan-600);

  /* ---- TYPE ---- */
  --ms-font-display: 'Exo 2', 'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  --ms-font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ms-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — 1.25 major third, but with display hero larger */
  --ms-fs-hero:    clamp(48px, 7vw, 88px);  /* @kind font */
  --ms-fs-h1:      clamp(36px, 4.4vw, 56px); /* @kind font */
  --ms-fs-h2:      clamp(28px, 3vw, 40px);   /* @kind font */
  --ms-fs-h3:      24px;
  --ms-fs-h4:      20px;
  --ms-fs-lg:      18px;
  --ms-fs-body:    16px;
  --ms-fs-sm:      14px;
  --ms-fs-xs:      12px;
  --ms-fs-micro:   11px;

  --ms-lh-tight:   1.08;  /* @kind font */
  --ms-lh-snug:    1.25;  /* @kind font */
  --ms-lh-normal:  1.55;  /* @kind font */
  --ms-lh-loose:   1.7;   /* @kind font */

  --ms-track-tight:    -0.01em;
  --ms-track-normal:   0;       /* @kind font */
  --ms-track-wide:     0.04em;
  --ms-track-eyebrow:  0.14em;

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

  /* ---- RADII ---- */
  --ms-r-0: 0px;
  --ms-r-1: 2px;
  --ms-r-2: 4px;
  --ms-r-3: 8px;
  --ms-r-4: 12px;
  --ms-r-pill: 999px;

  /* ---- SHADOWS ---- */
  --ms-shadow-sm:  0 1px 2px rgba(14, 37, 70, 0.06), 0 1px 1px rgba(14, 37, 70, 0.04);
  --ms-shadow-md:  0 4px 14px rgba(14, 37, 70, 0.08), 0 2px 4px rgba(14, 37, 70, 0.04);
  --ms-shadow-lg:  0 18px 40px rgba(14, 37, 70, 0.14), 0 6px 12px rgba(14, 37, 70, 0.06);
  --ms-shadow-logo: 4px 4px 0 rgba(155, 164, 180, 0.55); /* the grey offset shadow in the logo */

  /* ---- MOTION ---- */
  --ms-skew: -18deg; /* @kind other */ /* the signature angled slash */
  --ms-ease: cubic-bezier(.2,.7,.2,1); /* @kind other */
}

/* ---- BASE RESETS (scoped; opt in with .ms-root) ---- */
.ms-root, .ms-root * { box-sizing: border-box; }
.ms-root {
  font-family: var(--ms-font-sans);
  color: var(--ms-text);
  background: var(--ms-bg);
  line-height: var(--ms-lh-normal);
  font-size: var(--ms-fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ms-root h1, .ms-root h2, .ms-root h3, .ms-root h4, .ms-root h5 {
  font-family: var(--ms-font-display);
  font-weight: 700;
  letter-spacing: var(--ms-track-tight);
  line-height: var(--ms-lh-tight);
  color: var(--ms-brand-ink);
  margin: 0;
}
.ms-root p { margin: 0; }
.ms-root a { color: var(--ms-link); text-decoration: none; }
.ms-root a:hover { text-decoration: underline; }

/* ---- UTILITIES ---- */
.ms-eyebrow {
  font-family: var(--ms-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--ms-track-eyebrow);
  text-transform: uppercase;
  color: var(--ms-accent);
}
.ms-kicker {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--ms-track-wide);
  text-transform: uppercase;
  color: var(--ms-graphite);
}
.ms-mono {
  font-family: var(--ms-font-mono);
  font-feature-settings: "tnum" 1;
}

/* The signature "three bars" accent — two navy + one cyan, skewed */
.ms-bars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 14px;
}
.ms-bars::before,
.ms-bars::after,
.ms-bars > span {
  content: "";
  display: block;
  width: 28px;
  height: 8px;
  background: var(--ms-navy-800);
  transform: skewX(var(--ms-skew));
}
.ms-bars > span:nth-child(1) { background: var(--ms-cyan-500); }
.ms-bars.ms-bars--lg::before,
.ms-bars.ms-bars--lg::after,
.ms-bars.ms-bars--lg > span {
  width: 44px; height: 11px;
}
.ms-bars.ms-bars--white::before,
.ms-bars.ms-bars--white::after { background: var(--ms-paper); }

/* Angled slash image mask */
.ms-slash-img {
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.ms-slash-img--r {
  clip-path: polygon(0 0, 86% 0, 100% 100%, 14% 100%);
}

/* The navy footer strip used on investor/marketing slides */
.ms-footer-strip {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--ms-navy-800);
  color: var(--ms-paper);
  padding: 0 24px;
  font-size: 14px;
  position: relative;
}
.ms-footer-strip::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 180px;
  background: linear-gradient(90deg, transparent, var(--ms-cyan-500));
  transform: skewX(var(--ms-skew));
  transform-origin: bottom right;
  margin-right: -20px;
}