/* ================================================================
   PREVIOUSLY — Unified Design System (production)
   Golden Hour light theme. Single source of truth.
   Every page consumes these tokens, atoms, and five templates.
   No custom colors outside the tokens below.
   Spec: ~/workspace/module-design-system/ARCHITECTURE.md
   ================================================================ */

/* ---------------- 1. TOKENS ---------------- */
:root {
  /* Desert Golden Hour palette */
  --pv-bg: var(--desert-bg);                 /* page background */
  --pv-card: var(--desert-card);               /* card surfaces */
  --pv-text: var(--desert-ink);               /* primary text (15.3:1 on card) */
  --pv-text-dim: var(--desert-ink-dim);  /* secondary text */
  --pv-text-faint: var(--desert-ink-faint);/* captions, meta */
  --pv-accent: var(--desert-accent);             /* CTAs, kickers, links-as-text (4.8:1) */
  --pv-accent-deep: var(--desert-accent-deep);        /* odds, deep emphasis */
  --pv-rule: var(--desert-rule);    /* hairlines, idle borders */
  --pv-live: var(--desert-accent);               /* live red */
  --pv-ok: var(--color-win);                 /* success / new green */
  --pv-warn: var(--color-warn);               /* warning gold */
  --pv-img-fallback: var(--desert-pressed);       /* image placeholder wash */

  /* Radius — THREE values, that's it */
  --pv-r-card: 16px;
  --pv-r-media: 12px;
  --pv-r-pill: 999px;

  /* Type */
  --pv-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pv-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pv-display: clamp(40px, 6vw, 72px);
  --pv-title: clamp(24px, 3vw, 36px);
  --pv-h3: clamp(18px, 2.2vw, 24px);
  --pv-body: 17px;
  --pv-body-sm: 14px;
  --pv-caption: 13px;
  --pv-label: 11px;

  /* Spacing — one rhythm */
  --pv-s1: 4px;  --pv-s2: 8px;  --pv-s3: 12px; --pv-s4: 16px;
  --pv-s6: 24px; --pv-s8: 32px;  --pv-s12: 48px;

  /* Shadows */
  --pv-shadow-card: var(--shadow-card);
  --pv-shadow-hover: var(--shadow-card-hover);
}

/* ---------------- 2. SHARED ATOMS ---------------- */

/* One button system */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--pv-accent); color: var(--desert-card); border: 0;
  border-radius: var(--pv-r-pill); padding: 12px 28px;
  font-family: var(--pv-sans); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ds-btn:hover { transform: translateY(-1px); box-shadow: var(--pv-shadow-hover); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:focus-visible { outline: 2px solid var(--pv-accent-deep); outline-offset: 2px; }

.ds-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: transparent; color: var(--pv-text);
  border: 1.5px solid var(--pv-rule);
  border-radius: var(--pv-r-pill); padding: 11px 26px;
  font-family: var(--pv-sans); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer; text-decoration: none;
}
.ds-btn-ghost:hover { border-color: var(--pv-accent); color: var(--pv-accent); }

/* One kicker: 11px tracked uppercase */
.ds-kicker {
  font-family: var(--pv-sans); font-size: var(--pv-label);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pv-accent); font-weight: 700;
}

/* One pill system */
.ds-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--pv-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: var(--pv-r-pill); white-space: nowrap;
}
.ds-pill-live { background: var(--pv-live); color: var(--desert-card); }
.ds-pill-new  { background: var(--desert-win-wash); color: var(--pv-ok); }
.ds-pill-soon { background: rgba(var(--desert-accent-rgb), .10); color: var(--pv-accent-deep); }

/* Content ratings (Mild/Wild/18+) — locked values */
.ds-rating-mild  { background: var(--pv-ok); color: var(--desert-card); }
.ds-rating-wild  { background: var(--pv-warn); color: var(--desert-ink); }
.ds-rating-18plus { background: var(--pv-text); color: var(--pv-bg); }

/* ---------------- 3. TEMPLATES ---------------- */

/* T1 · MEDIA CARD — photo sells it */
.ds-media-grid {
  display: grid; gap: var(--pv-s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ds-media-card {
  background: var(--pv-card); border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-card); overflow: hidden;
  text-decoration: none; color: inherit; display: block;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ds-media-card:hover { box-shadow: var(--pv-shadow-hover); transform: translateY(-2px); }
.ds-media-card img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  background: var(--pv-img-fallback);
}
.ds-media-card__body { padding: var(--pv-s4); }
.ds-media-card__title {
  font-family: var(--pv-serif); font-size: 20px; line-height: 1.25;
  letter-spacing: -.01em; margin: var(--pv-s2) 0 var(--pv-s1);
}
.ds-media-card__meta { font-size: var(--pv-caption); color: var(--pv-text-faint); }

/* T2 · DATA CARD — numbers, not photos */
.ds-data-grid {
  display: grid; gap: var(--pv-s4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ds-data-card {
  background: var(--pv-card); border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-card); padding: var(--pv-s4);
  text-decoration: none; color: inherit; display: block;
  transition: box-shadow .2s ease;
}
.ds-data-card:hover { box-shadow: var(--pv-shadow-hover); }
.ds-data-card__league {
  font-size: var(--pv-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--pv-text-faint); margin-bottom: var(--pv-s3);
}
.ds-data-card__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pv-s2) 0;
}
.ds-data-card__team { display: flex; align-items: center; gap: var(--pv-s3); font-weight: 700; font-size: 16px; }
.ds-data-card__logo {
  width: 32px; height: 32px; border-radius: 50%; background: var(--pv-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--pv-accent-deep);
  border: 1px solid var(--pv-rule); flex: none;
}
.ds-data-card__score { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ds-data-card__foot {
  margin-top: var(--pv-s3); padding-top: var(--pv-s3);
  border-top: 1px solid var(--pv-rule);
  font-size: var(--pv-caption); color: var(--pv-accent-deep); font-weight: 600;
}

/* T3 · LIST ROW — dense scannable rows */
.ds-list-rows {
  border: 1px solid var(--pv-rule); border-radius: var(--pv-r-card);
  overflow: hidden; background: var(--pv-card);
}
.ds-list-row {
  display: flex; align-items: center; gap: var(--pv-s4);
  padding: var(--pv-s3) var(--pv-s4);
  border-bottom: 1px solid var(--pv-rule);
  text-decoration: none; color: inherit;
}
.ds-list-row:last-child { border-bottom: 0; }
.ds-list-row:hover { background: rgba(var(--desert-accent-rgb), .04); }
.ds-list-row__rank {
  font-family: var(--pv-serif); font-size: 24px; font-weight: 700;
  color: var(--pv-text-faint); width: 40px; flex: none; text-align: center;
}
.ds-list-row__thumb {
  width: 52px; height: 52px; border-radius: var(--pv-r-media);
  object-fit: cover; flex: none; background: var(--pv-img-fallback);
}
.ds-list-row__main { flex: 1; min-width: 0; }
.ds-list-row__title {
  font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-list-row__sub { font-size: var(--pv-caption); color: var(--pv-text-faint); }
.ds-list-row__meta { font-size: var(--pv-caption); font-weight: 700; flex: none; }
.ds-list-row__meta--up { color: var(--pv-ok); }
.ds-list-row__meta--down { color: var(--pv-accent); }

/* T4 · HERO — one story, full-bleed */
.ds-hero {
  position: relative; border-radius: var(--pv-r-card); overflow: hidden;
  min-height: 380px; display: flex; align-items: flex-end;
  text-decoration: none; color: var(--desert-card);
}
.ds-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--desert-scrim-strong) 0%, var(--desert-scrim-mid) 55%, var(--desert-scrim-soft) 100%);
}
.ds-hero__body { position: relative; padding: var(--pv-s8); max-width: 640px; }
.ds-hero .ds-kicker { color: var(--desert-accent-ember); }
.ds-hero__title {
  font-family: var(--pv-serif); font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.05; letter-spacing: -.015em; margin: var(--pv-s3) 0;
}
.ds-hero__dek { font-size: 16px; color: rgba(var(--desert-card-rgb), .82); margin-bottom: var(--pv-s4); }

/* T5 · TICKET — the betting slip */
.ds-ticket {
  background: var(--pv-card); border: 1px solid var(--pv-rule);
  border-radius: var(--pv-r-card); overflow: hidden; max-width: 560px;
}
.ds-ticket__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--pv-s4); border-bottom: 2px dashed var(--pv-rule);
}
.ds-ticket__title { font-family: var(--pv-serif); font-size: 22px; }
.ds-ticket__date { font-size: var(--pv-caption); color: var(--pv-text-faint); }
.ds-ticket__legs { padding: var(--pv-s2) var(--pv-s4); }
.ds-ticket__leg {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--pv-s3) 0; border-bottom: 1px solid var(--pv-rule); font-size: 15px;
}
.ds-ticket__leg:last-child { border-bottom: 0; }
.ds-ticket__pick { font-weight: 700; }
.ds-ticket__pick small { display: block; font-size: var(--pv-caption); color: var(--pv-text-faint); font-weight: 400; }
.ds-ticket__odds { font-weight: 800; color: var(--pv-accent-deep); font-variant-numeric: tabular-nums; }
.ds-ticket__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--pv-s4); background: var(--pv-bg);
}
.ds-ticket__combined { font-size: var(--pv-caption); color: var(--pv-text-dim); }
.ds-ticket__combined b { font-size: 24px; color: var(--pv-text); font-variant-numeric: tabular-nums; }

/* ---------------- 4. MOBILE (390px) ---------------- */
@media (max-width: 480px) {
  .ds-media-grid,
  .ds-data-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--pv-s3); }
  .ds-media-card__title { font-size: 17px; }
  .ds-media-card__body { padding: var(--pv-s3); }

  .ds-hero { min-height: 300px; border-radius: var(--pv-r-media); }
  .ds-hero__body { padding: var(--pv-s4); }
  .ds-hero__title { font-size: clamp(24px, 7vw, 32px); }
  .ds-hero__dek { font-size: 14px; }

  .ds-list-row { padding: var(--pv-s2) var(--pv-s3); gap: var(--pv-s3); }
  .ds-list-row__thumb { width: 44px; height: 44px; }
  .ds-list-row__rank { font-size: 20px; width: 32px; }

  .ds-ticket__title { font-size: 19px; }
  .ds-ticket__combined b { font-size: 20px; }

  .ds-btn, .ds-btn-ghost { padding: 12px 22px; width: 100%; }
}