/* ============================================================
   HOCKEY LIVE — SHARED DESIGN TOKENS
   Square corners. Pitch-line palette. No floaty round shapes.
   ============================================================ */

:root {
  /* Palette */
  --turf-950: #0A130E;
  --turf-900: #0F1B14;
  --turf-800: #16261C;
  --turf-700: #203428;
  --turf-600: #2C4636;
  --line-100: #F4F7F2;
  --line-200: #DCE5DD;
  --line-400: #9FB0A4;
  --green-500: #2F8F4E;
  --green-400: #45B569;
  --blue-500: #2F6FE0;
  --blue-400: #5C8FEF;
  --amber-500: #E8A93B;
  --red-500: #E14B4B;
  --card-green: #3FAE5E;
  --card-yellow: #E8C23B;
  --card-red: #E14B4B;

  /* Aliases for the team-customization / substitution-panel / event-popup UI */
  --bg-primary: var(--turf-900);
  --bg-secondary: var(--turf-800);
  --text-primary: var(--line-100);
  --text-secondary: var(--line-200);
  --text-tertiary: var(--line-400);
  --line-300: #B9C7BC;      /* between line-200 and line-400 */
  --error: var(--red-500);
  --error-dark: #C71A3E;
  --green-300: var(--green-400);
  --green-600: var(--green-500);
  --green-900: #0D3320;
  --blue-300: #93C5FD;
  --amber-400: #FBBF24;
  --red-400: #F87171;
  --radius: 0;               /* matches the "square corners" design intent already stated at the top of this file */

  /* Type */
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing unit */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --border: 1px solid var(--turf-600);
  --border-light: 1px solid var(--line-200);

  /* Motion — a slightly springy curve borrows the tactile feel of
     well-built component libraries (Radix/shadcn) without the rounded,
     shadow-heavy look that comes with them. Two speeds: quick feedback
     for hover/press, a touch slower for layout-affecting reveals. */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.12s;
  --t-base: 0.2s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--turf-950);
  color: var(--line-100);
  min-height: 100vh;
}

button, input, textarea, select { font: inherit; color: inherit; }

button { min-height: 44px; cursor: pointer; border-radius: 0; }

input, textarea, select { border-radius: 0; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 2px;
  transition: outline-offset var(--t-fast) var(--ease-snap);
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--green-500); color: var(--turf-950); }

/* A pressed/active element settles in slightly — the same kind of
   tactile feedback Radix-style primitives give buttons, expressed
   in flat squared terms (a tiny inset, not a shadow). */
button:active,
a.btn-primary:active,
a.btn-neutral:active {
  transform: translateY(1px) scale(0.995);
}

/* Turf hairline texture used as a quiet background motif */
.turf-lines {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(244, 247, 242, 0.025),
    rgba(244, 247, 242, 0.025) 1px,
    transparent 1px,
    transparent 28px
  );
}

/* Square status pill, shared by hub cards / admin dashboard / detail header */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px var(--s3);
  border: 2px solid currentColor;
}

.status-pill .blip {
  width: 7px;
  height: 7px;
  background: currentColor;
  position: relative;
}

.status-pill.is-live { color: var(--red-500); }
.status-pill.is-live .blip { animation: blip-pulse 1.4s infinite; }
.status-pill.is-live .blip::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid currentColor;
  opacity: 0;
  animation: blip-ping 1.8s infinite;
}
.status-pill.is-scheduled { color: var(--line-400); }
.status-pill.is-ended { color: var(--blue-400); }

@keyframes blip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes blip-ping {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

.card-mark {
  display: inline-block;
  width: 10px;
  height: 14px;
  margin-right: var(--s2);
  vertical-align: -2px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.card-mark.green { background: var(--card-green); }
.card-mark.yellow { background: var(--card-yellow); }
.card-mark.red { background: var(--card-red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shared icon set (see shared/hockey-data.js Icons) — flat geometric
   SVGs used everywhere in place of emoji, sized to sit on the text
   baseline next to a label. */
.hi-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.hi-icon.hi-card { width: 0.85em; }