/* ══════════════════════════════════════════════════════
   Signal Tennis Design System Tokens
   ══════════════════════════════════════════════════════
   Component Patterns (per D-06):
   ─────────────────────────────────
   PRIMARY BTN:     .btn-signal-primary — var(--signal-blue) bg, #fff text, 8px radius
   SECONDARY BTN:   .btn-outline-primary — border var(--signal-blue), transparent bg
   FILTER CHIP:     .signal-pills .nav-link — 6px radius, 1.5px border, .76rem font
   STATUS BADGE:    .badge — bg-success/bg-danger/bg-warning, rounded-pill
   CARD (portal):   .signal-card — #fff bg, 12px radius, 0 1px 4px shadow
   CARD (public):   Larger padding, prominent CTAs, same 12px radius
   EMPTY STATE:     portal/includes/_empty_state.html — bi icon, heading, body, CTA
   LOADING:         portal/includes/_spinner.html — .spinner-border
   SECTION HEADER:  .player-section-header — 1rem, 700, uppercase, blue border-bottom
   ══════════════════════════════════════════════════════ */

:root {
  /* -- Colors ---------------------------------------- */
  --signal-blue:        #1a5fa8;
  --signal-blue-dark:   #154d8a;
  --signal-green:       #8dc63f;
  --signal-green-dark:  #72a32e;
  --signal-light:       #f4f7fb;
  --signal-border:      #dce5f0;
  --signal-navy:        #0f3a6b;
  --signal-ink:         #1e2a3a;
  --signal-muted:       #5a6a7e;
  --signal-destructive: #dc3545;

  /* -- Spacing --------------------------------------- */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* -- Typography - canonical roles ------------------ */
  --fs-body:    1rem;
  --fs-label:   0.82rem;
  --fs-heading: 1.25rem;
  --fs-display: 2rem;

  --fw-regular: 400;
  --fw-bold:    700;

  /* -- Typography - legacy (sunset v1.1) ------------- */
  --fs-xs:      0.68rem;
  --fs-sm:      0.75rem;
  --fs-md-sm:   0.88rem;

  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-extrabold: 800;

  --lh-body:    1.5;
  --lh-heading: 1.2;
  --lh-tight:   1.1;

  /* -- Radii ----------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  14px;
  --radius-2xl: 16px;

  /* -- Shadows --------------------------------------- */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow-md:   0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:   0 4px 24px rgba(26,95,168,.1);
  --shadow-hover: 0 8px 24px rgba(26,95,168,.12);
}

/* ── V3 surface palette ──────────────────────────────
   Consolidated from player_home.html:318 and squad_analytics.html:319.
   These were previously defined inline in each template. */
:root {
  --v3-bg:           #f0f2f7;
  --v3-surface:      #ffffff;
  --v3-surface-alt:  #f8fafc;
  --v3-ink:          #0f1626;
  --v3-ink-soft:     #4a5268;
  --v3-ink-faint:    #8691a8;
  --v3-border:       #dce1eb;
  --v3-blue:         var(--signal-blue);
  --v3-blue-light:   #e8f0fb;
  --v3-green:        var(--signal-green);
  --v3-green-dark:   #5f8c22;
  --v3-gold:         #b8841f;  /* darkened from #d89b2b for WCAG AA 3:1 on white */
  --v3-red:          #d04438;
  --v3-navy:         #0f2648;
  --v3-navy-mid:     #17335c;

  /* Elevated shadow (D-05) */
  --shadow-elevated: 0 8px 18px rgba(15, 23, 36, .12);

  /* Focus / accessibility alias (D-04) */
  --clr-primary:     var(--signal-blue);
}

/* -- CLS prevention for dynamic chart images -------- */
.chart-card img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}
.chart-iframe-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
}
.chart-iframe-interactive {
  aspect-ratio: 1 / 1;
}

/* -- Mobile responsive: 375px safe ------------------- */
@media (max-width: 575.98px) {
  /* Touch-friendly tap targets */
  .btn-sm {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Prevent horizontal overflow on tables */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Scrollable tab strips */
  .nav-tabs,
  .v3-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar,
  .v3-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-link,
  .v3-tab-group {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Ensure images never cause horizontal scroll */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Full-width form inputs on mobile */
  .form-control,
  .form-select {
    width: 100%;
  }
}