/* Hunt Deportes · tokens de diseño v1.2
   Fuente única de color, tipografía, espacio, radios y movimiento.
   Claro por defecto; oscuro con [data-theme="dark"] o la preferencia del sistema. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,800;1,900&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  /* Marca (fijos, no cambian con el tema) */
  --hd-mamey: #f26b21;
  --hd-mamey-ink: #c2410c;      /* mamey oscuro: botones con texto chico, acento de texto sobre blanco */
  --hd-mamey-soft: #ffe6d5;     /* mamey claro: único naranja que acepta texto oscuro */
  --hd-on-mamey-soft: #7a2e06;
  --hd-carbon: #1a1d23;
  --hd-stadium: #0d0f12;
  --hd-white: #ffffff;
  --hd-hueso: #f7f5f2;
  --hd-on-mamey: #ffffff;       /* sobre mamey todo va en blanco */

  /* Equipos (datos, no marca). Toros y Águilas nunca como fondo. */
  --team-lic: #003da5;
  --team-esc: #c8102e;
  --team-agu: #d6a400;
  --team-tor: #e35205;
  --team-est: #00843d;
  --team-gig: #7a1f3d;

  /* Superficies y texto (tema claro) */
  --hd-surface: #ffffff;
  --hd-surface-alt: #f7f5f2;
  --hd-surface-sunken: #efebe5;
  --hd-line: #e4dfd8;
  --hd-line-strong: #c9c2b8;
  --hd-ink: #1a1d23;
  --hd-ink-2: #3d4350;
  --hd-ink-muted: #5b6270;
  --hd-accent-text: #c2410c;     /* mamey como texto */
  --hd-ticker: #1a1d23;
  --hd-ticker-cell: #262a32;
  --hd-ticker-ink: #ffffff;
  --hd-ticker-muted: #b8bcc4;
  --hd-live: #d92020;
  --hd-live-on-dark: #ff6b6b;
  --hd-win: #15803d;
  --hd-win-soft: #e3f4ea;
  --hd-focus: #c2410c;
  --hd-shadow-card: 0 1px 2px rgba(26,29,35,.06), 0 6px 20px rgba(26,29,35,.08);
  --hd-shadow-hover: 0 18px 40px -18px rgba(26,29,35,.35);

  /* Tipografía */
  --hd-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --hd-font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hd-fs-display-xl: 64px;  --hd-lh-display-xl: 60px;
  --hd-fs-display-l: 44px;   --hd-lh-display-l: 44px;
  --hd-fs-headline: 28px;    --hd-lh-headline: 32px;
  --hd-fs-title: 20px;       --hd-lh-title: 24px;
  --hd-fs-score-xl: 56px;
  --hd-fs-score: 22px;
  --hd-fs-label: 12px;       --hd-ls-label: 1px;
  --hd-fs-body-l: 18px;      --hd-lh-body-l: 30px;
  --hd-fs-body: 16px;        --hd-lh-body: 24px;
  --hd-fs-stat: 15px;
  --hd-fs-caption: 13px;
  --hd-min-white-on-mamey: 19px; /* regla 3 */

  /* Espacio */
  --hd-space-1: 4px;  --hd-space-2: 8px;  --hd-space-3: 12px; --hd-space-4: 16px;
  --hd-space-6: 24px; --hd-space-8: 32px; --hd-space-12: 48px; --hd-space-16: 64px;
  --hd-container: 1320px;
  --hd-gutter: 40px;
  --hd-gutter-mobile: 16px;

  /* Radios */
  --hd-radius-sm: 4px; --hd-radius-md: 8px; --hd-radius-lg: 14px; --hd-radius-xl: 22px; --hd-radius-pill: 999px;

  /* Movimiento */
  --hd-ease: cubic-bezier(.2,.7,.2,1);
  --hd-ease-sweep: cubic-bezier(.7,0,.3,1);
  --hd-dur-press: 120ms;
  --hd-dur-hover: 160ms;
  --hd-dur-enter: 280ms;
  --hd-dur-content: 600ms;
  --hd-dur-data: 1200ms;
  --hd-skew: -14deg; /* la barra a 14 grados */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hd-surface: #121417; --hd-surface-alt: #1b1e23; --hd-surface-sunken: #0d0f12;
    --hd-line: #2c3038; --hd-line-strong: #454b55;
    --hd-ink: #f4f2ee; --hd-ink-2: #d6d9de; --hd-ink-muted: #a7adb8;
    --hd-accent-text: #ff9a5c; --hd-ticker: #0a0b0d; --hd-ticker-cell: #16181c;
    --hd-live: #ff5a5a; --hd-win: #4ade80; --hd-win-soft: #13281c; --hd-focus: #ff9a5c;
    --hd-mamey-soft: #3a2116; --hd-on-mamey-soft: #ffc9a8;
    --hd-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --hd-surface: #121417; --hd-surface-alt: #1b1e23; --hd-surface-sunken: #0d0f12;
  --hd-line: #2c3038; --hd-line-strong: #454b55;
  --hd-ink: #f4f2ee; --hd-ink-2: #d6d9de; --hd-ink-muted: #a7adb8;
  --hd-accent-text: #ff9a5c; --hd-ticker: #0a0b0d; --hd-ticker-cell: #16181c;
  --hd-live: #ff5a5a; --hd-win: #4ade80; --hd-win-soft: #13281c; --hd-focus: #ff9a5c;
  --hd-mamey-soft: #3a2116; --hd-on-mamey-soft: #ffc9a8;
  --hd-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45);
}

/* Utilidades base */
.hd-display { font-family: var(--hd-font-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .9; }
.hd-cond    { font-family: var(--hd-font-display); font-weight: 800; }
.hd-label   { font-family: var(--hd-font-display); font-weight: 800; font-size: var(--hd-fs-label); letter-spacing: var(--hd-ls-label); text-transform: uppercase; }
.hd-num     { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--hd-focus); outline-offset: 2px; }

/* Ficha de equipo (regla 8): caja blanca + barra del color del equipo */
.hd-team-chip {
  --team: var(--hd-carbon);
  display: inline-grid; place-items: center;
  padding: 3px 8px; border-radius: 6px;
  background: #ffffff; color: var(--hd-carbon);
  box-shadow: inset 0 -3px 0 var(--team), inset 0 0 0 1px #e4dfd8;
  font-family: var(--hd-font-display); font-weight: 800;
}

/* Botón principal y botón chico (regla 3) */
.hd-btn-primary { background: var(--hd-mamey); color: #fff; font: 800 19px/1 var(--hd-font-display); letter-spacing: 1px; text-transform: uppercase; border-radius: 14px; min-height: 52px; }
.hd-btn-small   { background: var(--hd-mamey-ink); color: #fff; font: 700 14px/1 var(--hd-font-sans); border-radius: 10px; min-height: 36px; }

/* Animaciones de interfaz */
@keyframes hd-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,107,33,.5); } 50% { box-shadow: 0 0 0 8px rgba(242,107,33,0); } }
@keyframes hd-dot   { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes hd-rise  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hd-in    { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes hd-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hd-grow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hd-eq    { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes hd-scroll{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hd-shim  { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hd-new   { from { background: var(--hd-mamey-soft); } to { background: var(--hd-surface); } }
@keyframes hd-ring  { 0% { box-shadow: 0 0 0 0 rgba(242,107,33,.45); } 100% { box-shadow: 0 0 0 28px rgba(242,107,33,0); } }
@keyframes hd-slide { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes hd-spin  { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}