/* ================================================================
   PlayerPro · tokens del sistema visual
   Fuente de verdad: DESIGN.md (raíz del repo).
   Tema por defecto = A (Continuidad ordenada, claro).
   Tema oscuro      = C (Athletes primero) vía [data-theme="dark"].
   Este fichero lo consumen PlayerPro.Admin, PlayerPro.Web y la app móvil.
   ================================================================ */

:root {
  color-scheme: light;

  /* --- Marca --- */
  --marca-ambar:        #F5B300;  /* fondo de acento; SIEMPRE con texto --marca-tinta encima */
  --marca-ambar-fuerte: #D99A00;  /* hover / activo sobre ámbar */
  --marca-tinta:        #14161A;  /* barras, texto sobre ámbar */

  /* --- Superficies --- */
  --fondo:              #FFFFFF;
  --superficie:         #FFFFFF;
  --superficie-2:       #F4F6F8;
  --superficie-3:       #EEF0F2;
  --superficie-inversa: #14161A;

  /* --- Texto --- */
  --texto:         #14161A;
  --texto-suave:   #5B6069;
  --texto-tenue:   #8A9099;
  --texto-inverso: #FFFFFF;

  /* --- Bordes --- */
  --borde:        #E4E7EB;
  --borde-fuerte: #CBD0D6;

  /* --- Semántica (independiente del ámbar de marca) --- */
  --exito:   #0E9F6E;  --exito-fondo:   #E7F6F0;  --exito-texto:   #05513A;
  --peligro: #C2352F;  --peligro-fondo: #FBEBEA;  --peligro-texto: #7A1C18;
  --aviso:   #B7791F;  --aviso-fondo:   #FBF0DC;  --aviso-texto:   #6B4310;
  --info:    #2563A8;  --info-fondo:    #E8F0FA;  --info-texto:    #123A66;

  /* --- Foco --- discreto: un borde gris fino, solo con teclado. Sin halo de color. */
  --anillo-foco:         0 0 0 1px var(--borde-fuerte);
  --anillo-foco-inverso: 0 0 0 1px rgba(255, 255, 255, .5);

  /* --- Radios (A = redondeo suave) --- */
  --radio-sm: 0.25rem;
  --radio:    0.375rem;
  --radio-lg: 0.625rem;
  --radio-completo: 999px;

  /* --- Elevación (A = sombra suave sobre blanco) --- */
  --sombra-1: 0 1px 2px rgba(20, 22, 26, .06), 0 1px 3px rgba(20, 22, 26, .10);
  --sombra-2: 0 2px 4px rgba(20, 22, 26, .06), 0 12px 28px -12px rgba(20, 22, 26, .22);

  /* --- Espaciado (base 4 px) --- */
  --espacio-1: 0.25rem;  --espacio-2: 0.5rem;  --espacio-3: 0.75rem;
  --espacio-4: 1rem;     --espacio-5: 1.5rem;  --espacio-6: 2rem;
  --espacio-7: 3rem;     --espacio-8: 4rem;

  /* --- Tipografía --- */
  --fuente-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --fuente-cuerpo:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --display-peso: 700;
  --display-transform: uppercase;
  --display-track: .02em;

  --texto-xs:   0.75rem;   --lh-xs:   1rem;
  --texto-sm:   0.875rem;  --lh-sm:   1.25rem;
  --texto-base: 1rem;      --lh-base: 1.5rem;
  --texto-lg:   1.125rem;  --lh-lg:   1.6rem;
  --texto-xl:   1.375rem;  --lh-xl:   1.75rem;
  --texto-2xl:  1.75rem;   --lh-2xl:  2rem;
  --texto-3xl:  2.25rem;   --lh-3xl:  2.4rem;

  /* --- Toque / movimiento --- */
  --toque-min: 44px;   /* mínimo del informe público */
  --duracion:  160ms;
  --curva:     cubic-bezier(.2, 0, 0, 1);
}

/* ================= Tema oscuro = C (Athletes) =================
   Opt-in explícito. El panel NO cambia solo con prefers-color-scheme
   (jornadas largas frente al monitor). El informe público puede
   adoptarlo por preferencia del sistema — ver DESIGN.md §5.          */

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

  --marca-ambar:        #FFC01E;
  --marca-ambar-fuerte: #E0A400;
  --marca-tinta:        #0A0A0B;

  --fondo:              #0A0A0B;  /* «carbón» */
  --superficie:         #141416;
  --superficie-2:       #1B1B1D;
  --superficie-3:       #232326;
  --superficie-inversa: #F5F5F4;

  --texto:         #F5F5F4;  /* «hueso» */
  --texto-suave:   #A5A5A1;
  --texto-tenue:   #6F6F6B;
  --texto-inverso: #0A0A0B;

  --borde:        #262629;
  --borde-fuerte: #3A3A3E;

  --exito:   #22C55E;  --exito-fondo:   #0E2C1A;  --exito-texto:   #7BE7A6;
  --peligro: #EF4444;  --peligro-fondo: #2E1110;  --peligro-texto: #F7A6A0;
  --aviso:   #E0A400;  --aviso-fondo:   #2C2205;  --aviso-texto:   #F3D07A;
  --info:    #5AA0E8;  --info-fondo:    #10233A;  --info-texto:    #A8CCF0;

  --anillo-foco: 0 0 0 2px var(--fondo), 0 0 0 4px var(--marca-ambar);

  /* C = esquinas más marcadas y elevación por color, no por sombra */
  --radio-sm: 0.125rem;
  --radio:    0.1875rem;
  --radio-lg: 0.375rem;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .5), 0 12px 28px -12px rgba(0, 0, 0, .7);

  /* Display «atleta» */
  --fuente-display: "Anton", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --display-peso: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracion: 0ms; }
}

/* ================= Capa base ================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: var(--display-peso);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-track);
  text-wrap: balance;
  margin: 0 0 var(--espacio-3);
  line-height: 1.15;
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }

p { margin: 0 0 var(--espacio-4); }

a { color: inherit; text-decoration-color: var(--marca-ambar); text-underline-offset: 2px; }

code, kbd, samp { font-family: var(--fuente-mono); font-size: 0.9em; }

/* El foco solo se marca con teclado y de forma discreta. Nunca en elementos que reciben
   foco por programa (el <h1> al navegar, contenedores con tabindex="-1"). */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: var(--radio-sm); }
:is(h1, h2, h3, h4, [tabindex="-1"], .contenido, main):focus,
:is(h1, h2, h3, h4, [tabindex="-1"], .contenido, main):focus-visible { box-shadow: none; }

::selection { background: var(--marca-ambar); color: var(--marca-tinta); }