/* Swim.team — Shared token layer + button primitive.

   LOAD ORDER: immediately AFTER style.css and BEFORE deck.css / meet.css /
   meet-ops.css / results-table.css.

   This is the single source of truth for the tokens that were previously
   DUPLICATED in per-sheet :root blocks (a latent bug: edit one, they silently
   diverge). Those blocks are removed; this file owns them. It also defines
   ONE focus ring and ONE button primitive so Deck / Meet / Timer stop each
   rolling their own. */

:root {
  /* Surfaces + rules beyond style.css's spine (--ink*, --accent*, --paper,
     --paper-2, --rule, --good/--warn/--bad all come from style.css) */
  --paper-3:      #eef1f5;
  --rule-strong:  #cbd3dd;
  --accent-deep:  #0c3f66;

  /* Soft status fills — pair with --good / --warn / --bad */
  --good-soft:    #d1fae5;
  --warn-soft:    #fef3c7;
  --bad-soft:     #fee2e2;

  /* Gold — ONE value (was #d9a400 in meet-ops.css, #facc15 in timer-race.php).
     NOT used for place badges (places render neutral dark by decision);
     reserved for future emphasis use. */
  --gold:         #d9a400;
  --gold-soft:    #fdf3d4;

  /* Radii */
  --r-btn:  6px;
  --r-row:  8px;
  --r-card: 12px;
  --r-pill: 999px;

  /* Year-page consistency grid — practice-count intensity ramp.
     0 = no practice, 3 = 3+ practices in a day. Endpoints are existing
     tokens; the two mid-steps are interpolations toward --accent. */
  --cal-0: var(--paper-3);
  --cal-1: #bcd6ec;
  --cal-2: #6aa6d6;
  --cal-3: var(--accent);

  /* Focus ring — ONE treatment everywhere. Replaces the stale
     rgba(72,152,212,…) (the pre-Pool blue) in meet.css and the opaque
     accent-soft rings in deck-team/meet-ops. */
  --ring: 0 0 0 3px rgba(30, 120, 196, 0.28);

  /* ---- Live palette: the phone-timer / on-deck sunlight siblings ----
     Higher-contrast by design; now a NAMED, COMPLETE set (was hardcoded
     inline and split across timer.php / timer-race.php / meet-ops.css).
     --live-bg is intentionally a hair cooler than --paper-2 for glare. */
  --live-bg:        #f7f9fc;
  --live-panel:     #ffffff;
  --live-text:      #0b1220;
  --live-dim:       #455168;
  --live-green:     #15803d;
  --live-red:       #c1121f;
  --live-blue:      #1d4ed8;
  --live-code:      #b45309;
  --live-secondary: #e8edf5;
  --live-line:      #dbe2ec;
}

/* ============================================================
   Canonical button primitive — one radius, one weight, token colors.
   This is the ONLY button definition: the old per-surface copies (.btn-primary
   in deck.css, .mt-btn in meet-ops.css, .dk .btn in deck-team.css) are
   retired and their markup carries class="btn btn-…". meet.css's .meet-btn
   survives aligned to these values. New markup uses .btn + a modifier.

   One primary, everywhere: the primary button is --accent on every surface,
   Deck included. Max one accent button per screen — every other button is
   .btn-ghost (or .btn-danger when destructive).
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-btn);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
/* .btn-accent is a deprecated alias of .btn-primary — same paint, kept so
   existing markup needn't change. */
.btn-primary, .btn-accent { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-accent:hover { background: var(--accent-ink); color: #fff; }
.btn-good { background: var(--good); color: #fff; }
.btn-good:hover { filter: brightness(1.08); }
.btn-ghost { background: var(--paper); color: var(--ink-2); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-4); color: var(--ink); }
.btn-danger { background: var(--paper); color: var(--bad); border-color: var(--rule-strong); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }

/* Align style.css's standalone form buttons to the primitive without having to
   reproduce style.css — this file loads later, so at equal specificity these
   properties win. (Colors/hover in style.css are already token-based.) */
.form-submit, .ocr-button {
  border-radius: var(--r-btn);
  font-weight: 600;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}