/* ═══════════════════════════════════════════════
   NSM DESIGN SYSTEM — Colors & Typography
   National Sports Museum
   Source: nsm-homepage.html + NSM Official Logo.png
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── BASE COLOR PALETTE ── */
:root {
  /* Primary */
  --nsm-navy:         #0A1F3F;
  --nsm-navy-deep:    #06132A;
  --nsm-navy-mid:     #0D2347;

  /* Red / Action */
  --nsm-red:          #C41E3A;
  --nsm-red-light:    #E8364F;
  --nsm-red-dark:     #9B1830;

  /* Accent */
  --nsm-gold:         #D4A853;

  /* Neutrals */
  --nsm-white:        #FFFFFF;
  --nsm-off-white:    #F7F6F3;
  --nsm-warm-grey:    #E8E5DF;

  /* Text */
  --nsm-text-primary:   #1A1A1A;
  --nsm-text-secondary: #5A5A5A;
  --nsm-text-light:     rgba(255,255,255,0.75);
  --nsm-text-muted:     rgba(255,255,255,0.30);

  /* ── SEMANTIC COLORS ── */
  --color-bg:           var(--nsm-off-white);
  --color-bg-alt:       var(--nsm-white);
  --color-bg-dark:      var(--nsm-navy);
  --color-bg-darkest:   var(--nsm-navy-deep);
  --color-fg:           var(--nsm-text-primary);
  --color-fg-secondary: var(--nsm-text-secondary);
  --color-fg-on-dark:   var(--nsm-white);
  --color-accent:       var(--nsm-red);
  --color-accent-hover: var(--nsm-red-dark);
  --color-accent-light: var(--nsm-red-light);
  --color-border:       var(--nsm-warm-grey);
  --color-border-dark:  rgba(255,255,255,0.06);

  /* ── TYPOGRAPHY ── */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* Type scale — display */
  --text-display-xl:  clamp(38px, 6vw, 72px);
  --text-display-lg:  clamp(34px, 4.5vw, 58px);
  --text-display-md:  clamp(32px, 4vw, 48px);
  --text-display-sm:  clamp(22px, 2.8vw, 36px);

  /* Type scale — body */
  --text-xl:    clamp(17px, 1.4vw, 21px);
  --text-lg:    clamp(15px, 1.2vw, 17px);
  --text-base:  15px;
  --text-sm:    13.5px;
  --text-xs:    12px;
  --text-2xs:   11px;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.65;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.18em;
  --tracking-caps:   0.22em;

  /* ── SPACING ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24: 96px;

  /* ── BORDERS & RADIUS ── */
  --radius-none: 0;           /* NSM uses square corners everywhere */
  --radius-sm:   2px;         /* Rare — only on very small elements */
  --radius-pill: 50%;         /* Stat circles only */

  --border-width: 1px;
  --border-accent: 3px;       /* Left-edge accent on hover cards */

  /* ── SHADOWS / GLOW ── */
  --shadow-card:    0 2px 20px rgba(0,0,0,0.06);
  --shadow-btn:     0 8px 32px rgba(0,0,0,0.3);
  --glow-red-sm:    0 0 0 0 rgba(196,30,58,0.4);
  --glow-red-lg:    0 0 0 12px rgba(196,30,58,0);
  --glow-white:     0 0 60px rgba(255,255,255,0.08);

  /* ── TRANSITIONS ── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-out:    ease;                          /* @kind other */
  --duration-fast:   200ms;                     /* @kind other */
  --duration-base:   300ms;                     /* @kind other */
  --duration-slow:   700ms;                     /* @kind other */
}

/* ══════════════════════════════════════════════
   SEMANTIC TYPE STYLES
══════════════════════════════════════════════ */

/* Display headings — Instrument Serif */
.h1, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-xl);
  line-height: var(--leading-tight);
  color: var(--color-fg);
}
.h1-on-dark, h1.on-dark {
  color: var(--nsm-white);
}
h1 em, .h1 em {
  font-style: italic;
  color: var(--nsm-red-light);
}

.h2, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  color: var(--nsm-navy);
}
.h2-on-dark {
  color: var(--nsm-white);
}

.h3, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-md);
  line-height: var(--leading-tight);
  color: var(--nsm-navy);
}

.h4, h4 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-display-sm);
  line-height: var(--leading-snug);
  color: var(--nsm-white);
}

/* Body copy */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg-secondary);
}

.body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--nsm-text-light);
}

/* Label / eyebrow — all-caps sans */
.eyebrow, .label-upper {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--nsm-red-light);
}

/* Caps small utility */
.caps-sm {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--nsm-text-secondary);
}

/* Quote / italic serif */
.quote-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-loose);
  color: var(--nsm-navy);
}