/* Shared design tokens — Apple Sports claro direction.
   Keeps existing variable names used across docs/app + docs/index so no
   call-site rewrite is needed; values updated to match the design handoff.
   New tokens (accent-soft, tier-*, radii, etc.) are additive. */

:root {
  color-scheme: light;

  --bg: #f5f5f7;
  --bg2: #ececed;
  --panel: #ffffff;
  --panel2: #f2f2f4;
  /* --panel3 / --line / --ink2 / --faint / --faint2 nacieron SOLO en el bloque
     oscuro; 30+ usos quedaban sin fallback en claro y la jerarquía se rompía
     (el navegador caía al valor heredado o a `unset`). Aquí van los
     equivalentes claros. Ratios medidos con la fórmula WCAG 2.1 (relative
     luminance) contra --bg #f5f5f7 / --panel #ffffff / --panel2 #f2f2f4. */
  --panel3: #e8e8ea;       /* superficie de tracks/barras — no lleva texto */
  --border: #e2e2e5;
  --line: #ededf0;         /* divisor sutil — no-texto, sin requisito de 4.5:1 */
  --ink: #1d1d1f;
  --ink2: #2c2c2e;         /* secundario fuerte — 12.80 / 13.94 / 12.47 : AAA */
  --mute: #515154;
  --faint: #57575b;        /* terciario/labels —  6.61 /  7.19 /  6.43 : AA  */
  --faint2: #6e6e73;       /* placeholder      —  4.66 /  5.07 /  4.54 : AA  */
  --placeholder: #6e6e73;

  --bet: #12b981;
  --bet2: #0a7a55;
  --accent-from: #12b981;
  --accent-to: #0e9f6e;
  --accent-soft: #e7f7f0;
  --accent-soft2: #eafaf3;
  --accent-border: #b8ecd5;

  --fade: #dc2626;
  --skip: #8a8a8e;
  /* Confianza alta/media/baja. Los valores previos fallaban como TEXTO en tema
     claro; se oscurecieron conservando tono y saturación hasta pasar 4.5:1 en
     la superficie más exigente (--panel2 #f2f2f4). Ratios --bg / --panel / --panel2:
       --alta  #0891b2 → 3.38 / 3.68 / 3.29  ✗   #077894 → 4.68 / 5.09 / 4.56 ✓
       --media #d97706 → 2.93 / 3.19 / 2.85  ✗   #a65b05 → 4.68 / 5.10 / 4.56 ✓
       --baja  #94a3b8 → 2.35 / 2.56 / 2.29  ✗   #5d708b → 4.64 / 5.05 / 4.52 ✓ */
  --alta: #077894;
  --media: #a65b05;
  --baja: #5d708b;
  --live: #e0245e;

  --info: #2a6fdb;
  --info-bg: #eef4ff;
  --pending-text: #a04407;
  --pending-bg: #fff4e5;
  --warn: #a04407;

  --tier-pro: #12b981;
  --tier-admin: #7c5cff;
  --draw-bar: #c9c9ce;
  --draw-ink: #04170f;
  --bet-ink: #04170f;
  --bet2-ink: #ffffff;   /* text ON a bet2 background — bet2 flips light/dark, so its ink must too */
  --prob-red: #c53030;   /* long-shot probability red — AA (>=4.5:1) on white/panel2 */
  --ui-black: #111;
  --ui-black-ink: #ffffff;

  --shadow: rgba(0, 0, 0, 0.06);
  --shadow-card: 0 10px 30px -22px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 24px 60px -30px rgba(0, 0, 0, 0.35);

  --radius-card: 16px;
  --radius-large: 20px;
  --radius-chip: 9px;
  --radius-pill: 999px;

  --content-app: 760px;
  --content-landing: 1080px;
  --nav-height: 64px;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* kini v2 dark — EXACT values from design_handoff_kini_v2 (README "Color — tema
     oscuro, por defecto"). This is the product-web default now; the light block above
     survives only for the toggle and the social "ficha clara" export. */
  --bg: #0a0e1a;
  --bg2: #0e1728;          /* gradient top of the header wash */
  --panel: #111827;
  --panel2: #1a2233;
  --panel3: #0c1220;       /* NEW — inner bars/tracks */
  --border: #1f2937;
  --line: #141c2e;         /* NEW — subtle dividers */
  --ink: #f2f5f9;
  --ink2: #e5e7eb;         /* NEW — strong secondary */
  --mute: #9aa3b2;
  /* Se subieron: como texto no llegaban a AA sobre ninguna superficie oscura.
     Ratios --bg #0a0e1a / --panel #111827 / --panel2 #1a2233:
       --faint  #6b7684 → 4.17 / 3.84 / 3.45 ✗   #8d97a6 → 6.52 / 6.01 / 5.38 ✓
       --faint2 #4b5567 → 2.56 / 2.36 / 2.12 ✗   #7c89a0 → 5.45 / 5.02 / 4.50 ✓
     Se mantiene la jerarquía (faint más claro que faint2). */
  --faint: #8d97a6;        /* labels/tertiary */
  --faint2: #7c89a0;       /* placeholder */
  --placeholder: #6b7684;

  --bet: #10b981;
  --bet2: #34d399;
  --accent-from: #10b981;
  --accent-to: #0e9f6e;
  --accent-soft: rgba(16, 185, 129, 0.14);
  --accent-soft2: rgba(16, 185, 129, 0.18);
  --accent-border: rgba(16, 185, 129, 0.35);

  --fade: #ef4444;
  --skip: #6b7684;
  --alta: #10b981;
  --media: #f0a35c;
  --baja: #9aa3b2;
  --live: #ff5d7e;         /* the design's single use of pink = live only */

  --info: #5b8def;         /* blue = information / away side */
  --info-bg: rgba(91, 141, 239, 0.12);
  --pending-text: #f0a35c;
  --pending-bg: rgba(240, 163, 92, 0.12);
  --warn: #f0a35c;         /* amber = warning / high commission */

  --tier-pro: #16c98d;
  --tier-admin: #a389ff;
  --draw-bar: #414d63;
  --draw-ink: #eef1f6;
  --bet-ink: #04120c;
  --bet2-ink: #04120c;   /* green-on-CTA text, handoff */
  --prob-red: #f26d6d;   /* lighter red for AA on dark panels */
  --ui-black: #dfe4ec;
  --ui-black-ink: #141a24;

  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-card: 0 40px 90px -50px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 48px 110px -40px rgba(0, 0, 0, 0.7);
}

/* ── Motion + depth tokens (redesign-skill 2026 pass) — additive, shared by
   docs/index + docs/app. Spring easing for physical feel; a cool-tinted lift
   shadow (not pure black) that reads richer; a subtle fractal-noise grain to
   break digital flatness. ── */
:root {
  /* Display face with character (Bricolage Grotesque) for headlines — replaces
     generic Manrope on big type so the brand doesn't read as templated. Body
     stays Manrope, data stays JetBrains Mono. Loaded via the Google Fonts link
     in docs/index.html + docs/app/index.html. */
  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --ease-spring: cubic-bezier(.34, 1.28, .5, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --shadow-lift: 0 22px 48px -28px rgba(12, 22, 43, .5);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --shadow-lift: 0 28px 64px -30px rgba(0, 0, 0, .75);
}

/* ── Utilidades de accesibilidad (WCAG 2.1 AA) — compartidas por docs/index y
   docs/app. Son utilidades, NO parches por elemento: cualquier control táctil
   nuevo (icono/botón cuadrado) se marca con .tap-44. Los controles que ya
   tienen clase de componente propia (.seg-btn, .picks-sub-btn, .lang-seg,
   .lang-pill, .footer-lang-pill) llevan el min-height:44px dentro de esa
   clase, no repetido elemento por elemento.
   Referencia: 2.5.5 Target Size, 2.4.1 Bypass Blocks.
   Deliberadamente NO fija `display`: varios de estos controles llevan
   `sm:hidden` / `hidden` de Tailwind y un display en la utilidad los volvería
   a mostrar. Solo tamaño mínimo; el layout lo pone quien la usa. ── */
.tap-44 {
  min-width: 44px;
  min-height: 44px;
}

/* Skip link — primer hijo de <body>, invisible hasta recibir foco de teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--bet2);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* El destino del skip link recibe foco programático: sin outline propio. */
#main:focus { outline: none; }

/* Anillo de foco de teclado global (WCAG 2.4.7 AA). Varios inputs traen un
   `outline:none` inline, así que esto usa !important pero SOLO en :focus-visible
   — un clic de ratón/tap (:focus a secas) no muestra nada, el anillo aparece
   solo para navegación por teclado/switch. #main conserva su foco silencioso
   arriba; el skip-link su propio anillo. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="option"], [role="tab"]):focus-visible {
  outline: 2px solid var(--bet2) !important;
  outline-offset: 2px;
  border-radius: 6px;
}