/* ==========================================================================
   CamBam Fantasy — design tokens
   "Augusta National at dusk"
   ========================================================================== */

:root {
  /* Color */
  --bg:           #0a0a0a;
  --surface:      #141414;
  --surface-2:   #1c1c1c;
  --hairline:    #262626;
  --text:        #f5f5f4;
  --text-2:      #a3a3a3;
  --text-3:      #525252;

  --emerald:     #1f8a5b;
  --emerald-mute:#0c3d28;
  --emerald-15:  rgba(31, 138, 91, 0.15);
  --emerald-08:  rgba(31, 138, 91, 0.08);

  --amber:       #f59e0b;
  --amber-15:    rgba(245, 158, 11, 0.15);
  --red:         #ef4444;
  --red-15:      rgba(239, 68, 68, 0.15);

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radius */
  --r-card: 12px;
  --r-btn:   8px;
  --r-pill: 999px;
}

/* Global resets for prototype */
* { box-sizing: border-box; }

.tnum  { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Type ramp */
.t-display { font: 700 32px/36px var(--font); letter-spacing: -0.01em; }
.t-h1      { font: 600 24px/32px var(--font); letter-spacing: -0.01em; }
.t-h2      { font: 600 18px/24px var(--font); letter-spacing: -0.005em; }
.t-body    { font: 400 16px/24px var(--font); }
.t-label   { font: 500 13px/18px var(--font); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.t-meta    { font: 400 13px/18px var(--font); color: var(--text-3); }
.t-caption { font: 500 11px/16px var(--font); letter-spacing: 0.04em; }

/* Pulse for "live" dot */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.live-pulse { animation: live-pulse 2s ease-in-out infinite; }

/* Skeleton shimmer (referenced from spec, not used heavily in static screens) */
/* Score swoosh — when a live score ticks, the number fades from emerald-tint
   back to primary text over 600ms. Looped here for prototype demo;
   in production, the .swoosh class is added on each value change
   and removed when the animation ends. */
@keyframes score-swoosh {
  0%   { color: var(--emerald); text-shadow: 0 0 12px rgba(31, 138, 91, 0.45); }
  60%  { color: var(--emerald); text-shadow: 0 0 0 rgba(31, 138, 91, 0); }
  100% { color: var(--text);    text-shadow: none; }
}
.swoosh { animation: score-swoosh 600ms ease-out; }
/* Demo-only: gently re-play every ~7s so reviewers can see the effect */
.swoosh-loop { animation: score-swoosh 600ms ease-out; animation-iteration-count: 1;
  animation-delay: 1.2s; animation-fill-mode: both; }
.swoosh-demo { animation: score-swoosh 1000ms ease-out infinite;
  animation-duration: 1s; animation-delay: 0s;
  animation-iteration-count: infinite; animation-direction: normal; }
@keyframes score-swoosh-loop {
  0%, 8%   { color: var(--emerald); text-shadow: 0 0 14px rgba(31, 138, 91, 0.5); }
  16%, 90% { color: var(--text);    text-shadow: none; }
  93%      { color: var(--emerald); text-shadow: 0 0 14px rgba(31, 138, 91, 0.5); }
  100%     { color: var(--text);    text-shadow: none; }
}
.swoosh-pulse { animation: score-swoosh-loop 7s ease-out infinite; }

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Lock-banner subtle pulse for warning state */
@keyframes warn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.92; }
}
.warn-pulse { animation: warn-pulse 60s ease-in-out infinite; }

/* Focus ring */
.focus-ring:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

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