/* GoTennis Design Tokens */
:root {
  /* Brand */
  --gt-court: #004438;
  --gt-court-hover: #003329;
  --gt-court-tint: #E8EDEB;     /* 8% court on warm bg */
  --gt-clay: #CB5A28;
  --gt-clay-hover: #B14E22;
  --gt-clay-tint: #F6E7DE;

  /* Festive accents (used as highlights, not primary) */
  --gt-optic: #B6D63A;          /* tennis-ball optic lime */
  --gt-optic-ink: #41510E;      /* readable text on optic */
  --gt-optic-tint: #EEF4D6;
  --gt-gold: #C99A2E;           /* champion gold */
  --gt-gold-tint: #F6ECCF;

  /* Energy accent — what "live / highlight" uses. Swappable by vibe. */
  --gt-accent: var(--gt-clay);
  --gt-accent-hover: var(--gt-clay-hover);
  --gt-accent-tint: var(--gt-clay-tint);

  /* Hero treatment — overridden per vibe */
  --gt-hero-bg: #004438;
  --gt-hero-stripe: transparent;

  /* Surfaces */
  --gt-bg: #F7F8F6;
  --gt-surface: #FFFFFF;
  --gt-surface-2: #FBFAF6;       /* warm panel */
  --gt-border: #E7E3DA;
  --gt-border-strong: #D6D2C7;

  /* Text */
  --gt-ink: #17211D;
  --gt-ink-2: #4E5A55;
  --gt-ink-3: #8A938E;

  /* Status */
  --gt-success: #2F7D5B;
  --gt-warn: #B58A2E;
  --gt-danger: #B23A2A;
  --gt-info: #2C6E8F;

  /* Type */
  --gt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --gt-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radius */
  --gt-r-sm: 4px;
  --gt-r-md: 6px;
  --gt-r-lg: 8px;

  /* Spacing (8pt) */
  --gt-s-1: 4px;
  --gt-s-2: 8px;
  --gt-s-3: 12px;
  --gt-s-4: 16px;
  --gt-s-5: 24px;
  --gt-s-6: 32px;
  --gt-s-7: 48px;

  /* Shadows — minimal */
  --gt-shadow-1: 0 1px 0 rgba(23, 33, 29, 0.04);
  --gt-shadow-2: 0 1px 2px rgba(23, 33, 29, 0.06), 0 0 0 1px rgba(23, 33, 29, 0.04);
  --gt-focus: 0 0 0 3px rgba(0, 68, 56, 0.18);
}

/* Base resets used inside artboards */
.gt {
  font-family: var(--gt-font-sans);
  color: var(--gt-ink);
  background: var(--gt-bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
.gt * { box-sizing: border-box; }
.gt h1, .gt h2, .gt h3, .gt h4, .gt h5, .gt h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--gt-ink); }
.gt p { margin: 0; }
.gt a { color: inherit; text-decoration: none; }
.gt button { font-family: inherit; cursor: pointer; }
.gt table { border-collapse: collapse; width: 100%; }

/* Type scale */
.gt .t-display { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.gt .t-h1 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.gt .t-h2 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.gt .t-h3 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.gt .t-body { font-size: 14px; line-height: 1.5; }
.gt .t-sm { font-size: 13px; line-height: 1.45; }
.gt .t-xs { font-size: 12px; line-height: 1.4; }
.gt .t-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gt-ink-2);
}
.gt .t-mono { font-family: var(--gt-font-mono); font-feature-settings: "tnum"; }
.gt .muted { color: var(--gt-ink-2); }
.gt .muted-2 { color: var(--gt-ink-3); }

/* Card */
.gt .card {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-r-lg);
}
.gt .card-pad { padding: 20px; }
.gt .card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gt-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Button */
.gt .btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--gt-r-md);
  border: 1px solid var(--gt-border-strong);
  background: var(--gt-surface);
  color: var(--gt-ink);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.gt .btn:hover { background: var(--gt-bg); }
.gt .btn-primary {
  background: var(--gt-court);
  border-color: var(--gt-court);
  color: #fff;
}
.gt .btn-primary:hover { background: var(--gt-court-hover); border-color: var(--gt-court-hover); }
.gt .btn-clay {
  background: var(--gt-clay); border-color: var(--gt-clay); color: #fff;
}
.gt .btn-clay:hover { background: var(--gt-clay-hover); border-color: var(--gt-clay-hover); }
.gt .btn-ghost { border-color: transparent; background: transparent; }
.gt .btn-ghost:hover { background: var(--gt-court-tint); }
.gt .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.gt .btn-icon { width: 32px; padding: 0; justify-content: center; }

/* Input */
.gt .input {
  height: 34px; padding: 0 12px;
  background: var(--gt-surface);
  border: 1px solid var(--gt-border-strong);
  border-radius: var(--gt-r-md);
  font: inherit; font-size: 13px;
  color: var(--gt-ink);
}
.gt .input:focus { outline: none; border-color: var(--gt-court); box-shadow: var(--gt-focus); }
.gt select.input { padding-right: 28px; }

/* Badge / pill */
.gt .badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--gt-court-tint); color: var(--gt-court);
}
.gt .badge-clay { background: var(--gt-clay-tint); color: var(--gt-clay); }
.gt .badge-neutral { background: #EEEAE0; color: var(--gt-ink-2); }
.gt .badge-success { background: #E1F0E8; color: var(--gt-success); }
.gt .badge-warn { background: #F5ECD7; color: var(--gt-warn); }
.gt .badge-outline {
  background: transparent; border: 1px solid var(--gt-border-strong); color: var(--gt-ink-2);
}

/* Status dot */
.gt .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; position: relative; }
.gt .dot-live { background: var(--gt-clay); box-shadow: 0 0 0 3px rgba(203, 90, 40, 0.2); }
.gt .dot-live::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--gt-clay);
  opacity: .45;
  animation: gt-dot-pulse 2.2s ease-out infinite;
}
.gt .dot-done { background: var(--gt-ink-3); }
.gt .dot-up { background: var(--gt-court); }

@keyframes gt-dot-pulse {
  0%   { transform: scale(1);   opacity: .45; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gt .dot-live::after { animation: none; display: none; }
}

/* Table */
.gt .tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.gt .tbl th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gt-ink-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--gt-border);
  background: var(--gt-surface-2);
  position: sticky; top: 0;
}
.gt .tbl td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--gt-border);
  vertical-align: middle;
  transition: background .12s;
}
.gt .tbl tr:last-child td { border-bottom: none; }
.gt .tbl tr.row-link:hover td,
.gt .tbl tr.row-link:active td { background: var(--gt-court-tint); cursor: pointer; }

/* Avatar */
.gt .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gt-court-tint); color: var(--gt-court);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--gt-border);
}
.gt .av-lg { width: 36px; height: 36px; font-size: 12px; }

/* Surface tint helpers */
.gt .surface-warm { background: var(--gt-surface-2); }
.gt .surface-court { background: var(--gt-court); color: #E8EDEB; }
.gt .hr { height: 1px; background: var(--gt-border); border: 0; margin: 0; }

/* Court line decoration */
.gt .court-rule {
  height: 3px;
  background: linear-gradient(90deg, var(--gt-court) 0 60%, var(--gt-clay) 60% 100%);
  border-radius: 2px;
}

/* Tabs */
.gt .tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--gt-border); }
.gt .tab {
  padding: 10px 0; font-size: 13px; font-weight: 500; color: var(--gt-ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.gt .tab:hover { color: var(--gt-ink); }
.gt .tab.active { color: var(--gt-court); border-bottom-color: var(--gt-court); }

/* Image placeholder */
.gt .img-ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(23,33,29,0.04) 8px 9px),
    var(--gt-surface-2);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--gt-ink-3); font-family: var(--gt-font-mono); font-size: 11px;
  letter-spacing: 0.02em;
}

/* Scrollbars inside artboards */
.gt ::-webkit-scrollbar { width: 8px; height: 8px; }
.gt ::-webkit-scrollbar-thumb { background: var(--gt-border-strong); border-radius: 4px; }
.gt ::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────────────────────────────────────────────────
   VIBE SYSTEM — Calm (default) · Bright · Festive
   Set data-vibe on <html>. Variables cascade into every artboard.
   ───────────────────────────────────────────────────────────── */

/* Shared festive helpers (visible only when a vibe paints them) */
.gt .court-rule {
  background: linear-gradient(90deg,
    var(--gt-court) 0 45%,
    var(--gt-accent) 45% 75%,
    var(--gt-rule-3, var(--gt-accent)) 75% 100%);
}
/* Hero accent stripe — a thin optic line that only shows in brighter vibes */
.gt .gt-hero-stripe {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gt-hero-stripe);
}
/* Champion block can promote to gold in festive */
.gt .gt-champion {
  background: var(--gt-champ-bg, var(--gt-court)) !important;
}
.gt .gt-champion .gt-champ-icon { color: var(--gt-champ-icon, var(--gt-clay)); }

/* BRIGHT — warmer, livelier, but still restrained */
[data-vibe="bright"] {
  --gt-bg: #FAFBF4;
  --gt-surface-2: #FBFAF2;
  --gt-court-tint: #E2EEDC;
  --gt-clay-tint: #FAE7D9;
  --gt-accent: #D5612A;
  --gt-accent-hover: #BC5222;
  --gt-accent-tint: #FAE7D9;
  --gt-rule-3: var(--gt-optic);
  --gt-hero-bg: #00503F;
  --gt-hero-stripe: var(--gt-optic);
}

/* FESTIVE — optic energy + gold champions, punchier badges */
[data-vibe="festive"] {
  --gt-bg: #FBFCF3;
  --gt-surface-2: #FAFAEE;
  --gt-border: #E6E6D2;
  --gt-court-tint: #DCEED0;
  --gt-clay-tint: #FBE6D6;
  --gt-accent: #DD5E25;
  --gt-accent-hover: #C2511E;
  --gt-accent-tint: #FBE6D6;
  --gt-rule-3: var(--gt-optic);
  --gt-hero-bg: #00543F;
  --gt-hero-stripe: var(--gt-optic);
  --gt-champ-bg: linear-gradient(120deg, #1C5A38 0%, #00543F 60%);
  --gt-champ-icon: var(--gt-gold);
}
/* Festive badge punch-up */
[data-vibe="festive"] .gt .badge { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02); }
[data-vibe="festive"] .gt .badge-success { background: #DCEFD6; color: #2A7A4E; }
[data-vibe="festive"] .gt .badge-warn { background: var(--gt-gold-tint); color: var(--gt-gold); }
/* Optic accent utility for live/now states */
[data-vibe="festive"] .gt .badge-clay,
[data-vibe="bright"] .gt .badge-clay { background: var(--gt-accent-tint); color: var(--gt-accent); }

/* Accent-driven elements follow --gt-accent in all vibes */
.gt .btn-clay { background: var(--gt-accent); border-color: var(--gt-accent); }
.gt .btn-clay:hover { background: var(--gt-accent-hover); border-color: var(--gt-accent-hover); }
.gt .dot-live { background: var(--gt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gt-accent) 22%, transparent); }
.gt .dot-live::after { background: var(--gt-accent); }