/**
 * VHA Stats Platform Design System
 * Version 0.27.4
 *
 * Shared design tokens and reusable primitives for all public shortcodes.
 * Existing feature classes are mapped to these primitives so the visual
 * foundation can evolve without changing shortcode markup or behaviour.
 */
:root {
  /* Brand and semantic colours */
  --vha-primary: #1d428a;
  --vha-primary-hover: #15356f;
  --vha-primary-contrast: #ffffff;
  --vha-secondary: #172033;
  --vha-secondary-hover: #0f1728;
  --vha-accent: #1d428a;
  --vha-accent-hover: #15356f;
  --vha-gold: #b78a21;
  --vha-success: #16703a;
  --vha-warning: #9a6200;
  --vha-danger: #b42318;
  --vha-info: #075985;

  /* Text and surfaces */
  --vha-ink: #172033;
  --vha-text: #293548;
  --vha-muted: #647085;
  --vha-subtle: #8a95a6;
  --vha-line: #dbe1e8;
  --vha-line-strong: #bdc8d6;
  --vha-surface: #ffffff;
  --vha-surface-raised: #ffffff;
  --vha-soft: #f5f7fa;
  --vha-soft-strong: #eef2f6;
  --vha-row-hover: #edf4ff;

  /* Typography */
  --vha-font-family: inherit;
  --vha-font-size-xs: .75rem;
  --vha-font-size-sm: .875rem;
  --vha-font-size-md: 1rem;
  --vha-font-size-lg: 1.125rem;
  --vha-font-size-xl: 1.5rem;
  --vha-font-size-2xl: clamp(1.8rem, 4vw, 2.7rem);
  --vha-font-weight-medium: 600;
  --vha-font-weight-bold: 700;
  --vha-font-weight-heavy: 800;
  --vha-line-height-tight: 1.15;
  --vha-line-height-body: 1.55;

  /* Spacing scale */
  --vha-space-1: .25rem;
  --vha-space-2: .5rem;
  --vha-space-3: .75rem;
  --vha-space-4: 1rem;
  --vha-space-5: 1.25rem;
  --vha-space-6: 1.5rem;
  --vha-space-8: 2rem;
  --vha-space-10: 2.5rem;

  /* Shape, elevation and motion */
  --vha-radius-sm: 8px;
  --vha-radius-md: 10px;
  --vha-radius: 14px;
  --vha-radius-lg: 18px;
  --vha-radius-pill: 999px;
  --vha-shadow-sm: 0 4px 14px rgba(23, 32, 51, .05);
  --vha-shadow: 0 10px 30px rgba(23, 32, 51, .08);
  --vha-shadow-lg: 0 16px 42px rgba(23, 32, 51, .12);
  --vha-focus-ring: 0 0 0 3px rgba(29, 66, 138, .18);
  --vha-transition-fast: 140ms ease;
  --vha-transition: 180ms ease;

  /* Layout */
  --vha-content-width: 1200px;
  --vha-wide-width: 1500px;
  --vha-table-cell-x: .75rem;
  --vha-table-cell-y: .6875rem;
}

/* Scope defaults to plugin output without overriding the WordPress theme. */
[class^="vha-"], [class*=" vha-"] {
  box-sizing: border-box;
}

.vha-profile,
.vha-leaders,
.vha-directory,
.vha-team-profile,
.vha-standings,
.vha-playoff-picture,
.vha-team-schedule,
.vha-game-center,
.vha-league-leaders,
.vha-team-dashboard {
  color: var(--vha-text);
  font-family: var(--vha-font-family);
  line-height: var(--vha-line-height-body);
}

/* Reusable layout primitives for present and future shortcode markup. */
.vha-container { width: min(100%, var(--vha-content-width)); margin-inline: auto; }
.vha-container-wide { width: min(100%, var(--vha-wide-width)); margin-inline: auto; }
.vha-grid { display: grid; gap: var(--vha-space-4); }
.vha-grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vha-stack { display: flex; flex-direction: column; gap: var(--vha-space-4); }
.vha-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vha-space-3); }

/* Shared page and section headers. */
.vha-page-header,
.vha-profile-hero,
.vha-team-hero,
.vha-standings-header,
.vha-league-leaders-header,
.vha-team-dashboard-hero,
.vha-game-hero {
  border: 1px solid var(--vha-line);
  border-radius: var(--vha-radius-lg);
  background: linear-gradient(145deg, var(--vha-surface) 0%, var(--vha-soft) 100%);
  box-shadow: var(--vha-shadow);
}

.vha-page-kicker,
.vha-profile-kicker,
.vha-dashboard-kicker {
  color: var(--vha-muted);
  font-size: var(--vha-font-size-xs);
  font-weight: var(--vha-font-weight-heavy);
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vha-section-title {
  color: var(--vha-ink);
  font-weight: var(--vha-font-weight-heavy);
  line-height: var(--vha-line-height-tight);
}

/* Shared card primitive and mappings. */
.vha-card,
.vha-stat,
.vha-leader-card,
.vha-game-card,
.vha-playoff-card,
.vha-division-leaders-section,
.vha-three-stars,
.vha-three-star-card {
  border: 1px solid var(--vha-line);
  border-radius: var(--vha-radius);
  background: var(--vha-surface-raised);
  box-shadow: var(--vha-shadow-sm);
}

.vha-card-interactive,
.vha-stat,
.vha-leader-card {
  transition: border-color var(--vha-transition-fast), box-shadow var(--vha-transition), transform var(--vha-transition-fast);
}

.vha-card-interactive:hover,
.vha-stat:hover,
.vha-leader-card:hover {
  border-color: var(--vha-line-strong);
  box-shadow: var(--vha-shadow);
  transform: translateY(-2px);
}

/* Tables share one visual and interaction model. */
.vha-table-wrap {
  border: 1px solid var(--vha-line);
  border-radius: var(--vha-radius);
  background: var(--vha-surface);
  box-shadow: var(--vha-shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vha-table {
  color: var(--vha-text);
  font-variant-numeric: tabular-nums;
}

.vha-table th,
.vha-table td {
  padding: var(--vha-table-cell-y) var(--vha-table-cell-x);
  border-bottom-color: var(--vha-line);
}

.vha-table thead th {
  background: linear-gradient(180deg, #f8fafc, var(--vha-soft-strong));
  color: #3e4a5d;
  font-size: var(--vha-font-size-xs);
  font-weight: var(--vha-font-weight-heavy);
  letter-spacing: .04em;
}

.vha-table tbody tr { transition: background-color var(--vha-transition-fast); }
.vha-table tbody tr:nth-child(even) { background: #fafbfc; }
.vha-table tbody tr:hover { background: var(--vha-row-hover); }
.vha-table a { color: var(--vha-team-primary, var(--vha-accent)); }

/* Buttons and links. */
.vha-button,
.vha-back-link {
  border-radius: var(--vha-radius-md);
  font-weight: var(--vha-font-weight-bold);
  transition: background-color var(--vha-transition-fast), border-color var(--vha-transition-fast), box-shadow var(--vha-transition-fast), color var(--vha-transition-fast), transform var(--vha-transition-fast);
}

.vha-button {
  border-color: var(--vha-secondary);
  background: var(--vha-secondary);
  color: #fff;
}

.vha-button:hover,
.vha-button:focus-visible {
  border-color: var(--vha-secondary-hover);
  background: var(--vha-secondary-hover);
  color: #fff;
  box-shadow: var(--vha-shadow-sm);
  transform: translateY(-1px);
}

.vha-button-secondary {
  border-color: var(--vha-line-strong);
  background: var(--vha-surface);
  color: var(--vha-secondary);
}

.vha-button-secondary:hover,
.vha-button-secondary:focus-visible {
  border-color: var(--vha-secondary);
  background: var(--vha-soft);
  color: var(--vha-secondary);
}

/* Badges and status indicators. */
.vha-badge,
.vha-season-badge,
.vha-game-status,
.vha-game-status-pill,
.vha-playoff-status,
.vha-injury-status,
.vha-player-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vha-radius-pill);
  font-size: var(--vha-font-size-xs);
  font-weight: var(--vha-font-weight-heavy);
  letter-spacing: .04em;
  line-height: 1;
}

.vha-badge-success { background: #dcfce7; color: #166534; }
.vha-badge-warning { background: #fff4cf; color: #7a4b00; }
.vha-badge-danger { background: #fef2f2; color: #991b1b; }
.vha-badge-info { background: #e0f2fe; color: #075985; }
.vha-diff-positive { color: var(--vha-success); }
.vha-diff-negative { color: var(--vha-danger); }

/* Forms and toolbar controls. */
.vha-directory-field input,
.vha-directory-field select,
.vha-leaders-toolbar input,
.vha-leaders-toolbar select {
  border-color: var(--vha-line-strong);
  border-radius: var(--vha-radius-sm);
  background: var(--vha-surface);
  color: var(--vha-text);
  transition: border-color var(--vha-transition-fast), box-shadow var(--vha-transition-fast);
}

.vha-directory-field input:focus,
.vha-directory-field select:focus,
.vha-leaders-toolbar input:focus,
.vha-leaders-toolbar select:focus {
  border-color: var(--vha-accent);
  box-shadow: var(--vha-focus-ring);
  outline: 0;
}

/* Unified focus visibility for keyboard users. */
.vha-button:focus-visible,
.vha-back-link:focus-visible,
.vha-table a:focus-visible,
.vha-team-menu a:focus-visible,
.vha-game-team-link:focus-visible,
.vha-standing-team-link:focus-visible,
.vha-sort-button:focus-visible {
  outline: 3px solid rgba(29, 66, 138, .38);
  outline-offset: 2px;
}

/* Message states. */
.vha-alert,
.vha-profile-error,
.vha-team-empty,
.vha-game-empty {
  border-radius: var(--vha-radius-md);
}

.vha-profile-error {
  border-left-color: var(--vha-danger);
  background: #fff7f7;
  color: #7f1d1d;
}

/* Compact modifier for homepage and dashboard placements. */
.vha-compact { --vha-table-cell-x: .625rem; --vha-table-cell-y: .5rem; }
.vha-compact .vha-card,
.vha-compact.vha-card { padding: var(--vha-space-3); }
.vha-compact .vha-section-title { margin-block: var(--vha-space-4) var(--vha-space-2); }

@media (max-width: 700px) {
  :root {
    --vha-table-cell-x: .625rem;
    --vha-table-cell-y: .5625rem;
  }

  .vha-page-header,
  .vha-profile-hero,
  .vha-team-hero,
  .vha-standings-header,
  .vha-league-leaders-header,
  .vha-team-dashboard-hero,
  .vha-game-hero {
    border-radius: var(--vha-radius);
  }

  .vha-table-wrap { border-radius: var(--vha-radius-md); }
  .vha-table { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vha-card-interactive,
  .vha-stat,
  .vha-leader-card,
  .vha-button,
  .vha-back-link,
  .vha-team-menu a,
  .vha-table tbody tr {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}