/* ============================================================
   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;

  /* 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);
}

* { 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;
}

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

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

/* 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.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--s1) var(--s3);
  border: 1px solid currentColor;
}

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

.status-pill.is-live { color: var(--red-500); }
.status-pill.is-live .blip { animation: blip-pulse 1.4s 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; }
}

.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;
}