/* ============================================================
   Next Wave Hoops · Design Tokens
   Colors, typography, spacing, radii, shadows.
   Inspired by Pacific Northwest coasts: deep navy, wave blues,
   sea-foam whites, with a basketball-orange accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --nw-navy-900: #061029;     /* midnight ink — logo shadow */
  --nw-navy-800: #0d2347;     /* deep harbor — primary navy */
  --nw-navy-700: #173468;     /* hover navy */
  --nw-navy-600: #234a8c;     /* surface navy */
  --nw-blue-500: #3674c4;     /* wave mid blue */
  --nw-blue-400: #5994d5;     /* logo highlight */
  --nw-blue-300: #8bb6dc;     /* logo light */
  --nw-blue-200: #bcd4e8;     /* foam */
  --nw-blue-100: #dae6f1;     /* mist */
  --nw-blue-050: #eef3f8;     /* paper-blue */

  --nw-white:    #ffffff;
  --nw-paper:    #f8fafd;     /* off-white app surface */

  --nw-ink-900:  #0a1322;     /* text on light */
  --nw-ink-700:  #1c2a40;
  --nw-ink-500:  #4d5b76;     /* muted text */
  --nw-ink-300:  #8a99ae;     /* placeholder */
  --nw-line-200: #d4dce8;     /* dividers */
  --nw-line-100: #e8edf3;

  /* Accent — burnt sienna / editorial energy. Use sparingly. */
  --nw-court-500: #d6582f;
  --nw-court-400: #e57948;
  --nw-court-100: #fce0d2;

  /* Semantic */
  --nw-success-500: #1f9d6b;
  --nw-success-100: #d6f1e3;
  --nw-warn-500:    #e0a32a;
  --nw-warn-100:    #fbeec9;
  --nw-danger-500:  #d34d4d;
  --nw-danger-100:  #f9dadb;
  --nw-info-500:    var(--nw-blue-500);
  --nw-info-100:    var(--nw-blue-100);

  /* ---------- Semantic color tokens ---------- */
  --bg-app:        var(--nw-paper);
  --bg-surface:    var(--nw-white);
  --bg-raised:     var(--nw-white);
  --bg-subtle:     var(--nw-blue-050);
  --bg-inverse:    var(--nw-navy-800);
  --bg-brand:      var(--nw-navy-800);
  --bg-brand-soft: var(--nw-blue-100);

  --fg-default:    var(--nw-ink-900);
  --fg-muted:      var(--nw-ink-500);
  --fg-subtle:     var(--nw-ink-300);
  --fg-on-brand:   var(--nw-white);
  --fg-brand:      var(--nw-navy-800);
  --fg-link:       var(--nw-blue-500);

  --border-default: var(--nw-line-200);
  --border-subtle:  var(--nw-line-100);
  --border-strong:  var(--nw-ink-300);
  --border-focus:   var(--nw-blue-500);

  /* ---------- Type families ---------- */
  --font-display: "Oswald", "Bebas Neue", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (rem; base 16) ---------- */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  4rem;      /* 64 */
  --fs-6xl:  5.5rem;    /* 88 */

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --ls-display: -0.01em;
  --ls-jersey:   0.06em;     /* uppercase display tracking */
  --ls-label:    0.04em;
  --ls-body:    -0.005em;

  /* ---------- Spacing (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;

  /* ---------- Radii (locked to 0 — sharp edges only) ---------- */
  --r-xs:  0;
  --r-sm:  0;
  --r-md:  0;
  --r-lg:  0;
  --r-xl:  0;
  --r-2xl: 0;
  --r-pill: 0;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(13, 35, 71, 0.06);
  --shadow-md:  0 4px 14px rgba(13, 35, 71, 0.08), 0 1px 2px rgba(13, 35, 71, 0.04);
  --shadow-lg:  0 14px 32px rgba(13, 35, 71, 0.12), 0 2px 6px rgba(13, 35, 71, 0.06);
  --shadow-xl:  0 24px 56px rgba(13, 35, 71, 0.18);
  --shadow-brand: 0 8px 24px rgba(54, 116, 196, 0.28);
  --ring-focus:   0 0 0 3px rgba(54, 116, 196, 0.28);
  --inset-card:   inset 0 0 0 1px var(--border-subtle);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* ---------- Gradients ---------- */
  --grad-wave:  linear-gradient(135deg, #0d2347 0%, #3674c4 60%, #8bb6dc 100%);
  --grad-sky:   linear-gradient(180deg, #bcd4e8 0%, #eef3f8 100%);
  --grad-court: linear-gradient(135deg, #d6582f 0%, #e57948 100%);
  --grad-ink:   linear-gradient(180deg, rgba(6,16,41,0) 0%, rgba(6,16,41,0.78) 100%); /* protection */
}

/* ============================================================
   Semantic / element styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-default);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display (athletic, jersey-style) ---- */
.nw-display-xl,
.nw-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-jersey);
  line-height: var(--lh-tight);
  color: var(--fg-brand);
}
.nw-display-xl { font-size: var(--fs-6xl); }
.nw-display    { font-size: var(--fs-4xl); }

.nw-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nw-blue-500);
}

/* ---- Headings ---- */
h1, .nw-h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-default);
  margin: 0;
}
h2, .nw-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-default);
  margin: 0;
}
h3, .nw-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-default);
  margin: 0;
}
h4, .nw-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-default);
  margin: 0;
}

/* ---- Body ---- */
p, .nw-p {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  margin: 0;
}
.nw-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.nw-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.nw-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: var(--ls-label);
}

/* ---- Label / overline (used on stat blocks, form labels) ---- */
.nw-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- Stat / scoreboard numbers ---- */
.nw-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--fg-brand);
  font-variant-numeric: tabular-nums;
}

/* ---- Mono ---- */
code, .nw-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--nw-navy-800);
}

/* ---- Link ---- */
a, .nw-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
a:hover, .nw-link:hover {
  border-bottom-color: currentColor;
}